如何设置 babel.config.js，因此找不到相对于目录的预设“@babel/env”工作 - 反应

Question

我在正在使用的应用程序中设置 babel 7 时遇到问题。 我看到了不同的解决方案，但现在没有一个对我有用，我仍然遇到同样的错误：

错误：找不到相对于目录 {projectURL} 的预设“@babel/env”

babel.config.js

module.exports = api => {
  api.cache(true);

  const presets = [
    ['@babel/preset-env',
      {
        targets: {
          browsers: ['defaults']
        },
        useBuiltIns: 'usage',
        corejs: 3,
      },
    ],
    "@babel/preset-react"
  ];

  const plugins = [
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-transform-runtime', // See: https://github.com/babel/babel/issues/9849
    ['babel-plugin-webpack-aliases', { config: './webpack/webpack.common.resolve.js' }]
  ];

  return {
    presets,
    plugins
  };
};

package.json 文件具有：

"devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/node": "^7.15.4",
    "@babel/plugin-proposal-class-properties": "^7.14.5",
    "@babel/plugin-proposal-decorators": "^7.15.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.14.5",
    "@babel/plugin-proposal-function-sent": "^7.14.5",
    "@babel/plugin-proposal-json-strings": "^7.14.5",
    "@babel/plugin-proposal-numeric-separator": "^7.14.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
    "@babel/plugin-proposal-throw-expressions": "^7.14.5",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-syntax-import-meta": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.15.0",
    "@babel/polyfill": "7.12.1",
    "@babel/preset-env": "^7.19.0",
    "@babel/preset-react": "^7.14.5",
    "@babel/runtime": "^7.15.4",
    "@types/jest": "^27.0.1",
    "babel-jest": "^27.2.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-webpack-aliases": "^1.1.3",
    "babel-preset-env": "^1.7.0",
    "clean-css": "^5.1.5",
    "css-loader": "^6.2.0",
    "file-loader": "6.2.0",
    "html-loader": "^2.1.2",
    "html-webpack-plugin": "^5.3.2",
    "jest": "^27.2.0",
    "jest-fetch-mock": "^3.0.3",
    "jest-transform-stub": "^2.0.0",
    "less": "^4.1.1",
    "less-loader": "^10.0.1",
    "mini-css-extract-plugin": "^2.3.0",
    "optimize-css-assets-webpack-plugin": "^6.0.1",
    "raw-loader": "^4.0.2",
    "style-loader": "^3.2.1",
    "supertest": "^6.1.6",
    "webpack": "^5.52.1",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^4.2.1",
    "webpack-merge": "^5.8.0"

Answer 1

全局旧版本 babel 安装和本地安装之间存在冲突，因此它加载的是旧的全局版本而不是本地版本，并且工作方式不同