ESLint 错误：找不到模块“解析/同步”

Question

我已经创建了自己的包供个人使用，并将其连接到项目。一切都很完美，除了两件事我不明白。

这是我的包中的依赖项

 "dependencies": {
    "@babel/preset-react": "^7.23.3",
    "@babel/eslint-parser": "^7.23.3",
    "eslint": "^8.44.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.4",
    "eslint-import-resolver-alias": "1.1.2",
    "eslint-import-resolver-webpack": "0.13.2",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "resolve": "^1.1.7"
  }

配置

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: {
      jsx: true
    },
    requireConfigFile: false,
    babelOptions: {
      presets: ["@babel/preset-react"],
    },
  },
  env: {
    browser: true,
    node: true
  },
  extends: ['airbnb', 'airbnb/hooks'],
  settings: {
    'import/resolver': {
      alias: [
        ['@src', './src'],
      ],
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      webpack: {
        config: './webpack/webpack.config.js',
      },
    },
  },
  plugins: ['react', 'jsx-a11y', 'import'],
  rules: {}

Error Error: Cannot find module 'resolve/sync' Require stack:
   node_modules\eslint-import-resolver-node\index.js
   node_modules\eslint-module-utils\resolve.js
   node_modules\eslint-plugin-import\lib\rules\no-unresolved.js
   node_modules\eslint-plugin-import\lib\index.js
   node_modules\@eslint\eslintrc\dist\eslintrc.cjs Occurred while
   linting TableContainer.js:3 Rule: "import/no-cycle"

我有一条规则 - '导入/无循环': [2, { maxDepth: 1 }], 我可以删除它 - 结果不会改变

这是发生错误的组件的完整代码

import React, { useRef, useMemo } from 'react'
import cn from 'classnames'
import ExtTable from '@src/components/RegisterTable/ExtTable/ExtTable'
import { ConfigProvider } from 'antd'
import { Spin, EmptyState } from 'barsup-react-ui-kit'
import { getTotalCount } from '@src/utils'
import { useClickLink } from '@src/components/Hooks'
import {
  usePagesHandler,
  useSortingHandler,
  useGetHeaderTable,
} from '../hooks'
import OptionsContent from './components/OptionsContent'

function TableContainer ({
  tableData,
  totalCount,
  totalPatient,
  loading,
  showContent,
  pageConfig,
  resetPage,
  tags,
  checkedTags,
  onChangeTags,
  loadingCount,
  savedTableConfig,
  additionChunk,
  enableCounter,
  setEnableCounter,
  hidedFields,
  saveSession,
  isSavedSession,
  savedPageOption,
}) {
  const tableRef = useRef()
  const { onChangePageRange } = usePagesHandler()
  const { onClickSort, queue } = useSortingHandler(hidedFields)
  const count = useMemo(
    () => getTotalCount({ enableCounter, totalCount, additionChunk, tableData }),
    [enableCounter, totalCount, additionChunk, tableData],
  )
  const {
    headerTable,
    isReady,
    defaultTableConfig,
  } = useGetHeaderTable(savedTableConfig)
  const { onRowClick } = useClickLink(saveSession)

  if (!isReady) return null

  return (
    <div ref={tableRef} className={cn('table-wrap', showContent && 'active')}>
      <ConfigProvider renderEmpty={() => (loading ? <Spin /> : <EmptyState />)}>
        <ExtTable
          className='table-scroll width-full-32 height-full-380 custom-pagination-wrap'
          headerConfig={{ active: true, defaultConfig: defaultTableConfig, rid: 'ssz' }}
          rowKey={record => record.r_n_}
          headerTable={headerTable}
          loading={loading}
          data={tableData}
          totalCount={count}
          optionContent={(
            <OptionsContent
              totalCount={totalCount}
              totalPatient={totalPatient}
              tags={tags}
              checkedTags={checkedTags}
              onChangeTags={onChangeTags}
              loadingCount={loadingCount}
              enableCounter={enableCounter}
              setEnableCounter={setEnableCounter}
            />
          )}
          onClickSort={onClickSort}
          sortingQueue={queue}
          resetPage={resetPage}
          isStaticPages={false}
          pageConfig={pageConfig}
          onChangePageRange={onChangePageRange}
          onRowDoubleClick={onRowClick}
          isSavedSession={isSavedSession}
          savedPageOption={savedPageOption}
        />
      </ConfigProvider>
    </div>
  )
}

export default TableContainer

找不到模块'resolve/sync' - 以前，我有完全相同的配置，并且没有错误，我没有使用包 - 'resolve。

第二个错误 - ESLint：“lodash”应该列在项目的依赖项中。

我制定了一条规则，但并不适用于所有人。 '导入/无无关依赖项': ['错误', { devDependency: true }], 我在 webpack 配置中声明了这个库

  resolve: {
    alias: {
      '@src': path.resolve(__dirname, '../src/'),
    },
  },

  experiments: {
    outputModule: true,
  },

  externalsType: 'var',

  externals: {
    antd: { var: 'antd' },
    react: { var: 'React' },
    'react-dom': { var: 'ReactDOM' },
    'react-redux': { var: 'ReactRedux' },
    '@reduxjs/toolkit': { var: 'ReduxToolkit' },
    'prop-types': { var: 'PropTypes' },
    'lodash': { var: 'Lodash' },
    'moment': { var: 'Moment' },
    'reselect': { var: 'Reselect' },
    'axios': { var: 'Axios' },
    'barsup-react-ui-kit': { var: 'BarsupReactUiKit' },
  },

这两个问题如何解决？

我尝试安装不同版本的软件包，重新定义规则，但没有任何帮助

Answer 1

你能解决这个问题吗？