配置 Babel + ESLint 时遇到“找不到模块”

编程问答 2022-04-22

问题描述

几周前我使用 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 并且我终生无法弄清楚如何进行这项工作。这是我当前的相关配置文件： 包.json

  "name": "ne-campground-reviews","dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.14.5","@babel/preset-react": "^7.13.13","lightBox2": "^2.11.3","react-icons": "^4.2.0","devDependencies": {
    "@babel/core": "^7.14.6","@babel/eslint-parser": "^7.14.7","@babel/eslint-plugin": "^7.14.5","eslint": "^7.29.0","scripts": {
    "start": "./bin/webpack-dev-server"
  }
}

.eslintrc.json

{
  "extends": [
    "eslint:recommended","react-hooks","@babel"],"parser": "@babel/eslint-parser","ecmaFeatures": { "jsx": true },"requireConfigFile": false,"babelOptions": {
      "presets": ["@babel/preset-react"]
}
  },"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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

babel-eslintbabeljsjavascriptreactjsreactjsreactjsreactjs