报错信息:
/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
package.json文件:
{ "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"] } ] } }
问题原因:
使用已弃用的babel-eslint
解析器不支持ES6模块,可以尝试更新。
解决方法:
1)在package.json文件中,将行"babel-eslint": "^10.0.2"
更新为"@babel/eslint-parser": "^7.5.4"
。最好使用最新的版本,
2)从文件夹中的终端/命令提示符中运行npm i
3)在.eslintrc
中,将解析器行"parser": "babel-eslint"
更新为"parser": "@babel/eslint-parser"
,
4)在.eslintrc
中,添加"requireConfigFile": false,
到parserOptions部分(在"ecmaVersion": 8,
下面)
5)运行该命令来检测文件。