ESLint - 错误：必须使用导入来加载 ES 模块

Question

我目前正在使用 React、TypeScript、样式组件、 Webpack等设置样板，在尝试运行ESLint时遇到错误：

\n

\n

错误：必须使用 import 来加载 ES 模块

\n

\n

这是错误的更详细版本：

\n

/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts\n  0:0  error  Parsing error: Must use import to load ES Module: /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js\nrequire() of ES modules is not supported.\nrequire() of /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/lib/definition.js from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/babel-eslint/lib/require-from-eslint.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.\nInstead rename definition.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ben/Desktop/development projects/react-boilerplate-styled-context/node_modules/eslint/node_modules/eslint-scope/package.json\n

\n

该错误发生在我只使用的每一个 .js 和 .ts/ .tsx 文件中，import或者该文件根本没有导入。我理解错误的意思，但我不知道为什么会抛出它，而实际上我只使用导入，甚至在某些文件中根本不使用导入。

\n

这是我的package.json文件，我在其中使用以下命令触发 linter npm run lint:eslint:quiet：

\n

{\n  "name": "my-react-boilerplate",\n  "version": "1.0.0",\n  "description": "",\n  "main": "index.tsx",\n  "directories": {\n    "test": "test"\n  },\n  "engines": {\n    "node": ">=14.0.0"\n  },\n  "type": "module",\n  "scripts": {\n    "build": "webpack --config webpack.prod.js",\n    "dev": "webpack serve --config webpack.dev.js",\n    "lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",\n    "lint:css": "stylelint \'./src/**/*.{js,ts,tsx}\'",\n    "lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet",\n    "lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern",\n    "lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx  ./src --no-error-on-unmatched-pattern --quiet --fix",\n    "test": "cross-env NODE_ENV=test jest --coverage",\n    "test:watch": "cross-env NODE_ENV=test jest --watchAll",\n    "typecheck": "tsc --noEmit",\n    "precommit": "npm run lint"\n  },\n  "lint-staged": {\n    "*.{ts,tsx,js,jsx}": [\n      "npm run lint:eslint:fix",\n      "git add --force"\n    ],\n    "*.{md,json}": [\n      "prettier --write",\n      "git add --force"\n    ]\n  },\n  "husky": {\n    "hooks": {\n      "pre-commit": "npx lint-staged && npm run typecheck"\n    }\n  },\n  "resolutions": {\n    "styled-components": "^5"\n  },\n  "author": "",\n  "license": "ISC",\n  "devDependencies": {\n    "@babel/core": "^7.5.4",\n    "@babel/plugin-proposal-class-properties": "^7.5.0",\n    "@babel/preset-env": "^7.5.4",\n    "@babel/preset-react": "^7.0.0",\n    "@types/history": "^4.7.6",\n    "@types/react": "^17.0.29",\n    "@types/react-dom": "^17.0.9",\n    "@types/react-router": "^5.1.17",\n    "@types/react-router-dom": "^5.1.5",\n    "@types/styled-components": "^5.1.15",\n    "@typescript-eslint/eslint-plugin": "^5.0.0",\n    "babel-cli": "^6.26.0",\n    "babel-eslint": "^10.0.2",\n    "babel-loader": "^8.0.0-beta.6",\n    "babel-polyfill": "^6.26.0",\n    "babel-preset-env": "^1.7.0",\n    "babel-preset-react": "^6.24.1",\n    "babel-preset-stage-2": "^6.24.1",\n    "clean-webpack-plugin": "^4.0.0",\n    "dotenv-webpack": "^7.0.3",\n    "error-overlay-webpack-plugin": "^1.0.0",\n    "eslint": "^8.0.0",\n    "eslint-config-airbnb": "^18.2.0",\n    "eslint-config-prettier": "^8.3.0",\n    "eslint-config-with-prettier": "^6.0.0",\n    "eslint-plugin-compat": "^3.3.0",\n    "eslint-plugin-import": "^2.25.2",\n    "eslint-plugin-jsx-a11y": "^6.2.3",\n    "eslint-plugin-prettier": "^4.0.0",\n    "eslint-plugin-react": "^7.14.2",\n    "eslint-plugin-react-hooks": "^4.2.0",\n    "extract-text-webpack-plugin": "^3.0.2",\n    "file-loader": "^6.2.0",\n    "html-webpack-plugin": "^5.3.2",\n    "husky": "^7.0.2",\n    "prettier": "^2.4.1",\n    "raw-loader": "^4.0.2",\n    "style-loader": "^3.3.0",\n    "stylelint": "^13.13.1",\n    "stylelint-config-recommended": "^5.0.0",\n    "stylelint-config-styled-components": "^0.1.1",\n    "stylelint-processor-styled-components": "^1.10.0",\n    "ts-loader": "^9.2.6",\n    "tslint": "^6.1.3",\n    "typescript": "^4.4.4",\n    "url-loader": "^4.1.1",\n    "webpack": "^5.58.2",\n    "webpack-cli": "^4.2.0",\n    "webpack-dev-server": "^4.3.1",\n    "webpack-merge": "^5.3.0"\n  },\n  "dependencies": {\n    "history": "^4.10.0",\n    "process": "^0.11.10",\n    "react": "^17.0.1",\n    "react-dom": "^17.0.1",\n    "react-router-dom": "^5.2.0",\n    "styled-components": "^5.2.1"\n  }\n}\n

\n

这是我的 .eslintrc 文件：

\n

{\n  "extends": ["airbnb", "prettier"],\n  "parser": "babel-eslint",\n  "plugins": ["prettier", "@typescript-eslint"],\n  "parserOptions": {\n    "ecmaVersion": 8,\n    "ecmaFeatures": {\n      "experimentalObjectRestSpread": true,\n      "impliedStrict": true,\n      "classes": true\n    }\n  },\n  "env": {\n    "browser": true,\n    "node": true,\n    "jest": true\n  },\n  "rules": {\n    "arrow-body-style": ["error", "as-needed"],\n    "class-methods-use-this": 0,\n    "react/jsx-filename-extension": 0,\n    "global-require": 0,\n    "react/destructuring-assignment": 0,\n    "import/named": 2,\n    "linebreak-style": 0,\n    "import/no-dynamic-require": 0,\n    "import/no-named-as-default": 0,\n    "import/no-unresolved": 2,\n    "import/prefer-default-export": 0,\n    "semi": [2, "always"],\n    "max-len": [\n      "error",\n      {\n        "code": 80,\n        "ignoreUrls": true,\n        "ignoreComments": true,\n        "ignoreStrings": true,\n        "ignoreTemplateLiterals": true\n      }\n    ],\n    "new-cap": [\n      2,\n      {\n        "capIsNew": false,\n        "newIsCap": true\n      }\n    ],\n    "no-param-reassign": 0,\n    "no-shadow": 0,\n    "no-tabs": 2,\n    "no-underscore-dangle": 0,\n    "react/forbid-prop-types": [\n      "error",\n      {\n        "forbid": ["any"]\n      }\n    ],\n    "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],\n    "react/jsx-no-bind": [\n      "error",\n      {\n        "ignoreRefs": true,\n        "allowArrowFunctions": true,\n        "allowBind": false\n      }\n    ],\n    "react/no-unknown-property": [\n      2,\n      {\n        "ignore": ["itemscope", "itemtype", "itemprop"]\n      }\n    ]\n  }\n}\n

\n

我\xe2\x80\x99m 不确定它是否相关，但这也是我的tsconfig.eslint.json文件：

\n

{\n  "extends": "./tsconfig.json",\n  "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],\n  "exclude": ["node_modules/**", "build/**", "coverage/**"]\n}\n

\n

我怎样才能解决这个问题？

\n

谷歌搜索该错误不会显示任何有用的论坛或引发的错误。他们中的大多数只是声明不要require在您的文件中使用，但我没有。

\n

Answer 1

我认为问题在于您正在尝试使用已弃用的babel-eslint 解析器，上次更新是在一年前，它看起来不支持 ES6 模块。更新到最新的解析器似乎有效，至少对于简单的 linting 来说是这样。

所以，这样做：

• 在 package.json 中，将该行更新"babel-eslint": "^10.0.2",为"@babel/eslint-parser": "^7.5.4",。这适用于上面的代码，但最好使用最新版本，在撰写本文时为 7.19.1。
• npm i从文件夹中的终端/命令提示符运行
• 在 .eslintrc 中，将解析器行更新"parser": "babel-eslint",为"parser": "@babel/eslint-parser",
• 在 .eslintrc 中，添加"requireConfigFile": false,到 parserOptions 部分（在下面"ecmaVersion": 8,）（我需要这个，或者 babel 正在寻找我没有的配置文件）
• 运行命令来检查文件

然后，对于我来说，只有两个配置文件，错误就会消失，并且我会得到适当的 linting 错误。

Answer 2

通过将 .eslintrc 的文件扩展名从 js 更改为 json 可以轻松解决该问题（在 .eslintrc.js 中使用 ESM 格式导出 .eslintrc 对象是行不通的）。