几周前我创建了一个简单的应用程序，create-react-app几乎立即我开始在 VSCode 中收到这个错误，关于它对 Babel 相关的东西不满意......我忽略了。我的应用程序有效，我能够构建并部署到 Heroku。ESLint 也在工作。但是 VSCode 中不断出现错误，这让我陷入了 Babel 和 ESLint 噩梦的兔子洞。
我得到的错误是关于babel-eslint我实际上没有安装的错误，尽管它是我的.eslintrc.json配置中命名的解析器。这是package.json在我进行任何更改之前我的文件的样子：
{
"name": "new-rails-react-project",
"private": true,
"dependencies": {
"@babel/preset-react": "^7.13.13",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"eslint": "^7.27.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
这就是我的 .eslintrc.json 文件的样子：
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true }
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
由于babel-eslint已弃用，我添加了@babel/eslint-parser并且无法为我的生活弄清楚如何使这项工作。这是我当前的相关配置文件：package.json
"name": "ne-campground-reviews",
"private": true,
"dependencies": {
"@babel/plugin-transform-react-jsx": "^7.14.5",
"@babel/preset-react": "^7.13.13",
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"@rails/webpacker": "5.4.0",
"axios": "^0.21.1",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"jquery": "^3.6.0",
"lightbox2": "^2.11.3",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0",
"redbox-react": "^1.6.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"@babel/core": "^7.14.6",
"@babel/eslint-parser": "^7.14.7",
"@babel/eslint-plugin": "^7.14.5",
"eslint": "^7.29.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-import": "^2.23.4",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"prettier": "^2.3.0",
"webpack-dev-server": "^3.11.2"
},
"scripts": {
"start": "./bin/webpack-dev-server"
}
}
.eslintrc.json
{
"extends": [
"eslint:recommended",
"plugin:import/errors",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended",
"prettier"
],
"plugins": ["react", "import", "jsx-a11y", "react-hooks", "@babel"],
"rules": {
"react/prop-types": 0,
"react-hooks/rules-of-hooks": "error",
"no-console": "warn",
"no-dupe-keys": "warn",
"jsx-a11y/rule-name": 0,
"jsx-a11y/anchor-has-content": "warn"
},
"parser": "@babel/eslint-parser",
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module",
"ecmaFeatures": { "jsx": true },
"requireConfigFile": false,
"babelOptions": {
"presets": ["@babel/preset-react"]
}
},
"env": {
"es6": true,
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
这是 babel.config.js 虽然我不知道这个文件是否仍然需要和/或正确配置
module.exports = function(api) {
var validEnv = ['development', 'test', 'production']
var currentEnv = api.env()
var isDevelopmentEnv = api.env('development')
var isProductionEnv = api.env('production')
var isTestEnv = api.env('test')
if (!validEnv.includes(currentEnv)) {
throw new Error(
'Please specify a valid `NODE_ENV` or ' +
'`BABEL_ENV` environment variables. Valid values are "development", ' +
'"test", and "production". Instead, received: ' +
JSON.stringify(currentEnv) +
'.'
)
}
return {
presets: [
isTestEnv && [
'@babel/preset-env',
{
targets: {
node: 'current'
},
modules: 'commonjs'
},
'@babel/preset-react'
],
(isProductionEnv || isDevelopmentEnv) && [
'@babel/preset-env',
{
forceAllTransforms: true,
useBuiltIns: 'entry',
corejs: 3,
modules: false,
exclude: ['transform-typeof-symbol']
}
],
[
'@babel/preset-react',
{
development: isDevelopmentEnv || isTestEnv,
useBuiltIns: true
}
]
].filter(Boolean),
plugins: [
'babel-plugin-macros',
'@babel/plugin-syntax-dynamic-import',
isTestEnv && 'babel-plugin-dynamic-import-node',
'@babel/plugin-transform-destructuring',
[
'@babel/plugin-proposal-class-properties',
{
loose: true
}
],
[
'@babel/plugin-proposal-object-rest-spread',
{
useBuiltIns: true
}
],
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
corejs: false
}
],
[
'@babel/plugin-transform-regenerator',
{
async: false
}
],
isProductionEnv && [
'babel-plugin-transform-react-remove-prop-types',
{
removeImport: true
}
]
].filter(Boolean)
}
}
这个错误是目前出现在诸如import和module
Parsing error: Cannot find module '@babel/preset-react'
Require stack:
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/@babel/core/lib/config/files/plugins.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/@babel/core/lib/config/files/index.js
- /Users/maddoxgrey/Projects/ne-campground-reviews-v2/node_modules/@babel/core/lib/index.js