解析错误：找不到模块'@babel/preset-react'。

Question

我有一个React项目。在每个.js文件的第一行中，当我导入React时，我收到以下错误：Parsing error: Cannot find module '@babel/preset-react'。

package.json

{
    "name": "admin",
    "version": "2.0.0",
    "description": "",
    "author": "",
    "main": "index.js",
    "engines": {
        "node": ">=14.15 <15",
        "npm": "~6"
    },
    "scripts": {
        "build-config:local": "CONFIG_ENV=local npm run build-config",
        "build-config:dev": "CONFIG_ENV=dev npm run build-config",
        "build-config:staging": "CONFIG_ENV=staging npm run build-config",
        "build-config:prod": "CONFIG_ENV=prod npm run build-config",
        "build-config": "buildconfig --env $CONFIG_ENV",
        "build": "npm run build-config && webpack --config ./webpack.config.js --mode production",
        "start": "webpack-dev-server --config ./webpack.config.dev.js --mode development"
    },
    "dependencies": {
        "@babel/eslint-parser": "^7.15.7",
        "@fortawesome/fontawesome-svg-core": "^1.2.36",
        "@fortawesome/free-brands-svg-icons": "^5.15.4",
        "@fortawesome/free-solid-svg-icons": "^5.15.4",
        "@fortawesome/react-fontawesome": "^0.1.15",
        "axios": "^0.21.4",
        "axios-progress-bar": "^1.2.0",
        "classnames": "^2.3.1",
        "clean-webpack-plugin": "^4.0.0",
        "copy-text-to-clipboard": "^3.0.1",
        "copy-webpack-plugin": "^9.0.1",
        "css-loader": "^6.3.0",
        "date-fns": "1.30.1",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.2",
        "humanize-string": "^2.1.0",
        "lodash": "^4.17.21",
        "loglevel": "^1.7.1",
        "rc-checkbox": "^2.1.7",
        "rc-collapse": "^3.1.2",
        "rc-switch": "^3.2.2",
        "react": "^16.3.0",
        "react-bootstrap-table-next": "^4.0.3",
        "react-bootstrap-table2-editor": "^1.4.0",
        "react-bootstrap-table2-filter": "^1.3.3",
        "react-bootstrap-table2-paginator": "^2.1.2",
        "react-dom": "^16.9.0",
        "react-helmet": "^6.1.0",
        "react-json-tree": "^0.15.0",
        "react-router-dom": "^5.3.0",
        "react-syntax-highlighter": "^15.4.4",
        "sass": "^1.42.1",
        "sass-loader": "^12.1.0",
        "serialize-error": "^8.1.0",
        "single-config": "^2.0.1",
        "style-loader": "^3.3.0",
        "svg-react-loader": "^0.4.6",
        "webpack": "^5.53.0",
        "webpack-cli": "^4.8.0"
    },
    "devDependencies": {
        "@babel/core": "^7.15.5",
        "@babel/preset-env": "^7.15.6",
        "@babel/preset-react": "^7.14.5",
        "babel-loader": "^8.2.2",
        "eslint": "^7.32.0",
        "eslint-config-prettier": "^7.1.0",
        "eslint-plugin-import": "^2.22.1",
        "eslint-plugin-jsx-a11y": "^6.2.3",
        "eslint-plugin-prettier": "^3.3.1",
        "eslint-plugin-react": "^7.19.0",
        "prettier": "^2.2.1",
        "stylelint": "^13.13.0",
        "stylelint-config-prettier": "^8.0.2",
        "stylelint-config-recommended": "^5.0.0",
        "stylelint-order": "^4.1.0",
        "stylelint-prettier": "1.2.0",
        "stylelint-scss": "3.19.0",
        "webpack-dev-server": "^4.2.1"
    }
}

.eslintrc.json

{
    "parser": "@babel/eslint-parser",
    "extends": ["eslint:recommended", "plugin:react/recommended", "prettier", "prettier/react"],
    "plugins": ["react", "import", "jsx-a11y", "prettier"],
    "env": {
        "es6": true,
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "sourceType": "module",
        "ecmaVersion": 6,
        "requireConfigFile": false,
        "babelOptions": {
            "presets": ["@babel/react"]
        }
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "rules": {
        "prettier/prettier": "error",
        "consistent-return": "warn",
        "no-console": "warn",
        "eqeqeq": "error",
        "no-alert": "error",
        "no-caller": "error",
        "no-constructor-return": "error",
        "no-else-return": "error",
        "no-eq-null": "error",
        "no-eval": "error",
        "no-extend-native": "error",
        "no-extra-bind": "error",
        "no-extra-label": "error",
        "no-floating-decimal": "error",
        "no-implicit-globals": "error",
        "no-implied-eval": "error",
        "no-iterator": "error",
        "no-lone-blocks": "error",
        "no-loop-func": "error",
        "no-multi-spaces": "error",
        "no-multi-str": "error",
        "no-new-func": "error",
        "no-new-wrappers": "error",
        "no-octal-escape": "error",
        "no-proto": "error",
        "no-return-assign": "error",
        "no-return-await": "error",
        "no-script-url": "error",
        "no-self-compare": "error",
        "no-sequences": "error",
        "no-throw-literal": "error",
        "no-unmodified-loop-condition": "error",
        "no-unused-expressions": "error",
        "no-useless-call": "error",
        "no-useless-concat": "error",
        "no-useless-return": "error",
        "require-await": "error",
        "arrow-body-style": ["error", "as-needed"],
        "arrow-spacing": ["error", { "before": true, "after": true }],
        "no-duplicate-imports": "error",
        "no-useless-constructor": "error",
        "no-useless-rename": "error",
        "no-var": "error",
        "no-useless-computed-key": "error",
        "prefer-arrow-callback": "error",
        "prefer-const": "error",
        "prefer-spread": "error",
        "prefer-template": "error",
        "rest-spread-spacing": "error",
        "symbol-description": "error",
        "comma-spacing": ["error", { "before": false, "after": true }],
        "key-spacing": "error",
        "keyword-spacing": "error",
        "max-len": ["error", { "code": 160 }],
        "linebreak-style": "error",
        "lines-between-class-members": "error",
        "new-cap": "error",
        "no-multi-assign": "error",
        "no-negated-condition": "warn",
        "no-nested-ternary": "error",
        "no-new-object": "error",
        "no-trailing-spaces": "error",
        "prefer-object-spread": "error",

        "react/prop-types": "off",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".tsx"] }],

        "react/sort-comp": [
            "error",
            {
                "order": ["static-variables", "static-methods", "lifecycle", "everything-else", "/^is.+$/", "/^on.+$/", "/^render.+$/", "render"],
                "groups": {
                    "lifecycle": [
                        "displayName",
                        "propTypes",
                        "contextTypes",
                        "childContextTypes",
                        "mixins",
                        "statics",
                        "defaultProps",
                        "state",
                        "instance-variables",
                        "constructor",
                        "getDefaultProps",
                        "getInitialState",
                        "getChildContext",
                        "getDerivedStateFromProps",
                        "componentWillMount",
                        "UNSAFE_componentWillMount",
                        "componentDidMount",
                        "componentWillReceiveProps",
                        "UNSAFE_componentWillReceiveProps",
                        "shouldComponentUpdate",
                        "componentWillUpdate",
                        "UNSAFE_componentWillUpdate",
                        "getSnapshotBeforeUpdate",
                        "componentDidUpdate",
                        "componentDidCatch",
                        "componentWillUnmount"
                    ]
                }
            }
        ],

        "import/no-unresolved": "off",
        "import/order": [
            "error",
            {
                "pathGroups": [
                    {
                        "pattern": "*.scss",
                        "group": "object",
                        "patternOptions": { "matchBase": true },
                        "position": "after"
                    },
                    {
                        "pattern": "*.svg",
                        "group": "object",
                        "patternOptions": { "matchBase": true },
                        "position": "after"
                    }
                ]
            }
        ]
    }
}

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config.dev.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebPackPlugin = require('html-webpack-plugin');

module.exports = () => ({
    devServer: {
        port: 8084,
        historyApiFallback: true, // serves index.html for all routes to avoid 404
        hot: true
    },
    devtool: 'eval-source-map',
    stats: 'minimal',
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[fullhash].bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: [path.resolve(__dirname, 'node_modules')],
                include: [path.resolve(__dirname, 'src')],
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react']
                    }
                }
            },
            {
                test: /\.(scss|css)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            sassOptions: {
                                quietDeps: true
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                include: [path.resolve(__dirname, 'src')],
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: 'images/',
                    useRelativePath: false
                }
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebPackPlugin({
            template: './src/index.html',
            favicon: './src/assets/favicon/favicon-32x32.png'
        })
    ]
});

- Matt

---

尝试执行 npm add @babel/runtime 命令 来源 - Taxel

@Taxel 我安装了 @babel/runtime，但是没有起作用。我尝试删除 node_modules、package-lock.json 并重新安装包，但是仍然没有改变。 - Matt

尝试在项目中注释掉 "presets": ["@babel/preset-env", "@babel/preset-react"]，然后运行该项目并取消注释。 - Shivam Jha

@AkleshSakunia 你说得对。我正在使用Cloud9环境，项目通过VS Code和它的插件Remote Explorer连接。当我在本地尝试时，没有出现任何错误。 - Matt

@Matt 很高兴我能够提出一些有意义的建议。 - Aklesh Sakunia

Answer 1

如果在VSCode中以全栈方式（前端和后端作为工作区中的子文件夹）显示此内容，请按照以下步骤调整当前工作区的eslint扩展配置：.vscode/settings.json

  "eslint.workingDirectories": [
    "./back",
    "./front"
  ]

这在我的情况下解决了这个问题。

- Alexandre Duros

---

对我来说很有效！谢谢 - undefined

Answer 2

也许这能帮助到某些人，我刚遇到过类似的问题并解决了。

我恰好在一个全栈项目中打开了VSCode，其中前端和后端是分开的文件夹。当我仅在前端文件夹中打开VSCode时，这个错误消失了。

我猜解决方法可能是创建一个共享的node_modules文件夹或者从前端和后端文件夹设置工作区，我选择了第二个选项。

- Dan-Lucian

---

非常感谢你，丹！我有一个类似的文件夹设置，单独打开文件夹解决了问题。 - Yohanna

谢谢！要是没有你，我可能永远都想不出来。 - Chase

这对我也起作用，但似乎只是一个权宜之计。如果能够同时打开两个文件夹并解决问题，那就太好了。 - Canovice

我确实同时打开了这两个文件夹。我使用 vscode 的工作区功能分别打开了这两个文件夹。这确实是一种 hacky 的解决方法，如果你找到更好的解决方法，请在这里回复。 - Dan-Lucian

Answer 3

尝试显式安装@babel/preset-react，因为有人告诉我们它不是默认安装的。

npm install --save-dev @babel/preset-react

此外，在 eslint.json 文件中，您在 babelOptions 下引用了 @babel/react 而不是 @babel/preset-react。

- devabhishekpal

Answer 4

我也遇到了同样的问题。我通过删除

标签

来解决这个问题。

> @babel/eslint-parser // from eslintrc.js to 
> babel/eslint-parser

我在package.json中注意到我有babel/eslint而不是@babel/eslint。

- Wadson Vaval

---

parser: "@babel/eslint-parser", parserOptions: { requireConfigFile: false, sourceType: "module", allowImportExportEverywhere: true, ecmaFeatures: { jsx: true }, babelOptions: { presets: ["@babel/preset-react"] } - Wadson Vaval

Answer 5

请在您的 webpack.config.js 文件中添加以下代码：

Encore
//...
.enableReactPreset()

- Yuksel CELIK

Answer 6

在尝试了几个小时后，将@babel/preset-react替换为babel-preset-react-app最终起作用了。

这是我的完整package.json（其中可能存在依赖项/开发依赖项混淆的情况）

{
  "name": "----",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.15.8",
    "@babel/preset-env": "^7.15.8",
    "@babel/runtime": "^7.15.4",
    "@reduxjs/toolkit": "1.6.2",
    "immer": "^9.0.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "7.2.5",
    "react-router-dom": "^5.2.1",
    "react-scripts": "^5.0.0-next.47",
    "redux": "4.1.1",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.3.1",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/prop-types": "^15.7.4",
    "@types/react": "^17.0.19",
    "@types/react-redux": "7.1.19",
    "babel-preset-react-app": "*",
    "json-loader": "^0.5.7",
    "lodash": "^4.17.21",
    "prettier": "^2.4.1"
  }
}

- agneska

Answer 7

从 .eslintrc 中删除这行对我有用。

  "parser": "@babel/eslint-parser",

- snack overflow

Answer 8

只需打开您的主项目文件夹，其中包含您的公共、源代码等文件。

- Ferdaus Zaman Polok