我目前正在用React、TypeScript、样式组件、Webpack等设置一个样板，在尝试运行ESLint:时出错
错误：必须使用导入加载ES模块
这是一个更详细的错误版本：
/Users/ben/Desktop/development projects/react-boilerplate-styled-context/src/api/api.ts
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
require() of ES modules is not supported.
require() 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.
Instead 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
错误发生在我的.js和.ts/.tsx文件中的每一个文件中，我只使用import，或者该文件根本没有导入。我理解错误的含义，但我不知道为什么会抛出它，而事实上，我在某些文件中只使用导入，甚至根本不使用导入。
这是我的包.json文件，我在其中使用npm run lint:eslint:quiet:触发linter
{
"name": "my-react-boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.tsx",
"directories": {
"test": "test"
},
"engines": {
"node": ">=14.0.0"
},
"type": "module",
"scripts": {
"build": "webpack --config webpack.prod.js",
"dev": "webpack serve --config webpack.dev.js",
"lint": "npm run typecheck && npm run lint:css && npm run lint:eslint:quiet",
"lint:css": "stylelint './src/**/*.{js,ts,tsx}'",
"lint:eslint:quiet": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet",
"lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern",
"lint:eslint:fix": "eslint --ext .ts,.tsx,.js,.jsx ./src --no-error-on-unmatched-pattern --quiet --fix",
"test": "cross-env NODE_ENV=test jest --coverage",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
"typecheck": "tsc --noEmit",
"precommit": "npm run lint"
},
"lint-staged": {
"*.{ts,tsx,js,jsx}": [
"npm run lint:eslint:fix",
"git add --force"
],
"*.{md,json}": [
"prettier --write",
"git add --force"
]
},
"husky": {
"hooks": {
"pre-commit": "npx lint-staged && npm run typecheck"
}
},
"resolutions": {
"styled-components": "^5"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.5.4",
"@babel/plugin-proposal-class-properties": "^7.5.0",
"@babel/preset-env": "^7.5.4",
"@babel/preset-react": "^7.0.0",
"@types/history": "^4.7.6",
"@types/react": "^17.0.29",
"@types/react-dom": "^17.0.9",
"@types/react-router": "^5.1.17",
"@types/react-router-dom": "^5.1.5",
"@types/styled-components": "^5.1.15",
"@typescript-eslint/eslint-plugin": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-eslint": "^10.0.2",
"babel-loader": "^8.0.0-beta.6",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^4.0.0",
"dotenv-webpack": "^7.0.3",
"error-overlay-webpack-plugin": "^1.0.0",
"eslint": "^8.0.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-with-prettier": "^6.0.0",
"eslint-plugin-compat": "^3.3.0",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.14.2",
"eslint-plugin-react-hooks": "^4.2.0",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.3.2",
"husky": "^7.0.2",
"prettier": "^2.4.1",
"raw-loader": "^4.0.2",
"style-loader": "^3.3.0",
"stylelint": "^13.13.1",
"stylelint-config-recommended": "^5.0.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.10.0",
"ts-loader": "^9.2.6",
"tslint": "^6.1.3",
"typescript": "^4.4.4",
"url-loader": "^4.1.1",
"webpack": "^5.58.2",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^4.3.1",
"webpack-merge": "^5.3.0"
},
"dependencies": {
"history": "^4.10.0",
"process": "^0.11.10",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"styled-components": "^5.2.1"
}
}
这是我的.eslintrc文件：
{
"extends": ["airbnb", "prettier"],
"parser": "babel-eslint",
"plugins": ["prettier", "@typescript-eslint"],
"parserOptions": {
"ecmaVersion": 8,
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"impliedStrict": true,
"classes": true
}
},
"env": {
"browser": true,
"node": true,
"jest": true
},
"rules": {
"arrow-body-style": ["error", "as-needed"],
"class-methods-use-this": 0,
"react/jsx-filename-extension": 0,
"global-require": 0,
"react/destructuring-assignment": 0,
"import/named": 2,
"linebreak-style": 0,
"import/no-dynamic-require": 0,
"import/no-named-as-default": 0,
"import/no-unresolved": 2,
"import/prefer-default-export": 0,
"semi": [2, "always"],
"max-len": [
"error",
{
"code": 80,
"ignoreUrls": true,
"ignoreComments": true,
"ignoreStrings": true,
"ignoreTemplateLiterals": true
}
],
"new-cap": [
2,
{
"capIsNew": false,
"newIsCap": true
}
],
"no-param-reassign": 0,
"no-shadow": 0,
"no-tabs": 2,
"no-underscore-dangle": 0,
"react/forbid-prop-types": [
"error",
{
"forbid": ["any"]
}
],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"react/jsx-no-bind": [
"error",
{
"ignoreRefs": true,
"allowArrowFunctions": true,
"allowBind": false
}
],
"react/no-unknown-property": [
2,
{
"ignore": ["itemscope", "itemtype", "itemprop"]
}
]
}
}
我不确定它是否相关，但这也是我的tsconfig.elint.json文件：
{
"extends": "./tsconfig.json",
"include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.js"],
"exclude": ["node_modules/**", "build/**", "coverage/**"]
}
我该怎么解决这个问题？
在谷歌上搜索错误不会显示任何有用的论坛或引发的错误。他们中的大多数人只是声明不要在你的文件中使用require，而我不是。
我认为问题是您试图使用不推荐使用的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错误。
通过将.eslintrc的文件扩展名从js更改为json，可以很容易地解决这个问题(在.eslintrc.js中使用ESM格式导出.eslitrc对象是不起作用的)。
如果您完成了以上所有操作，但仍然失败，请重新加载您的vscode。
这可能发生在许多最近发布的框架中，如Vue.js或Nuxt.js，主要是因为使用了ESM模块(旧Node.js版本不完全或根本不支持)。
最快的方法是使用类似nvm的东西，安装后，您可以运行：
nvm i 16(v16是截至撰写本文时的最新LTS)nvm use 16
您将在完全ESM支持下运行该项目。您可以通过运行node -v来再次检查。
我遵循了上面一条评论中的@rich-n建议，并据此：
转到.eslintrc.js并确保您具有以下设置：
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
// your babel options
presets: ["@babel/preset-env"],
},
},
};
这样做去除了所有的"；红色"；vscode中的标记：)
我只是删除了node_modules，并通过npm install重新安装，现在它可以工作了。
对于使用eslint-config React Native社区包的React Native设置
我按照接受的答案建议做了，但在根文件夹的package.json文件中没有任何"babel-eslint": "^10.0.2",行。
- 转到
node_modules/@react-native-community/eslint-config - 编辑package.json，将
"babel-eslint": "^10.0.2",更改为"@babel/eslint-parser": "^7.18.2", - 编辑文件index.js，将
"parser": "babel-eslint",更改为parser: '@babel/eslint-parser', - 转到项目和
npm i -D @babel/eslint-parser的根文件夹 - 运行lint命令
这样对我很管用。
"测试"："react脚本测试--transformIgnorePatterns"；node_modules/(？！axios)/">
使用这个对我有用。
对于任何不想安装babel解析器的人：默认情况下，Eslint使用espree解析器。因此，您可以简单地告诉eslint-config期望模块：
transform.next()处的"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module"
},
在步骤(C:\Users\Samsung Essentials \OneDrive \Área de Trabalho\projeto a3 final 2\projeto-a3-站点-de-Musica\projeto_front\node_modules\gensync\index.js:261:32)在C:\Users\Samsung Essentials \OneDrive \Área de Trabalho \projeto a3 final 2\projeto-a3-站点-音乐\projeto_front\node_modules\gensync\index.js:273:13
在async.call.result.err.err(C:\Users\ Samsung Essentials\OneDrive \área de-Trabalho \projeto a3 final 2\ projeto-a3站点-音乐[projeto_front\node_modeles\gensync\index.js:223:11)
[eslint]中存在错误src\component\Login.js第80:2:分析错误：函数外的"return"。(80:2)
webpack编译有2个错误和1个警告
在Visual Studio代码中，删除ESLint扩展，然后重新安装。
不确定我是否遗漏了什么，因为这个解决方案不在这里，但错误输出建议将eslint配置文件从<name>.js重命名为<name>.cjs。这就是我所要做的。
所以基本上是RTF。
"babel/eslint解析器"；取决于"@babel/核心"；。所以在"；npm install@babel/eslint解析器-S"；，您应该使用npm i @babel/core -S。