Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

Question

我已经解决了关于这个问题的所有 SO 问题，但到目前为止我还无法解决这个问题。

我正在学习关于 React 的 Pluralsight 课程，示例应用程序是从头开始手动构建的；这意味着每个依赖项都是手动添加的，无需使用任何 CLI。由于课程有点旧，我不得不花很多时间升级大部分 babel 的包，直到我在运行 webpack.

时遇到这个问题。

这是 package.json

上的依赖项列表

     "babel": {
       "presets": [
         "react",
         "env",
         "stage-2"
       ]
      },
      "dependencies": {
        "@babel/cli": "^7.14.3",
        "@babel/core": "^7.14.3",
        "@babel/preset-env": "^7.14.4",
        "@babel/preset-react": "^7.13.13",
        "@babel/preset-stage-2": "^7.8.3",
        "babel-loader": "^8.2.2",
        "ejs": "^3.1.6",
        "express": "^4.17.1",
        "nodemon": "^2.0.7",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "webpack": "^5.38.1"
      },
      "devDependencies": {
        "babel-eslint": "^10.1.0",
        "eslint": "^7.27.0",
        "eslint-plugin-react": "^7.24.0",
        "webpack-cli": "^4.7.0"
      }

这是 webpack.config.js

const path = require('path');

module.exports = {
    entry: './lib/components/app.jsx',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            { 
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', { targets: 'defaults' }],
                            '@babel/preset-react'
                        ]
                    }
                }
            }
        ],
    },
    devtool: 'source-map',
};

我是运行命令“webpack -w”。

SO 中的大多数答案都是关于正确配置 webpack.config.js 文件中的“预设”。到目前为止，我已经尝试了几件事，结果完全相同：

presets: [
    ['@babel/preset-env', { targets: 'defaults' }],
    '@babel/preset-react'
]


presets: [
    '@babel/preset-react'
]                       

presets: [
    '@babel/preset-env', 
    '@babel/preset-react'
]

我得到的完整错误如下：

ERROR in ./lib/components/app.jsx Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-react'

If you want to resolve "react", use "module:react"

Did you mean "@babel/react"? at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15) at resolve (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:164:23) at resolveStandardizedName (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:111:7) at resolvePreset (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:59:10) at loadPreset (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\files\plugins.js:78:20) at loadPreset.next () at createDescriptor (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules@babel\core\lib\config\config-descriptors.js:187:16) at createDescriptor.next () at step (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\gensync\index.js:261:32) at evaluateAsync (C:\Users\sromero\Documents\Learning\React\advanced-react\node_modules\gensync\index.js:291:5)

为了完整起见，错误所指的 app.jsx 文件是这个文件：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
    return (
        <h2>I am working!</h2>
    );
};

ReactDOM.render(
    <App />,
    document.getElementById('root')
);

如有任何帮助，我们将不胜感激。

Answer 1

package.json 中的 babel 键用于 Babel 6.x 并引用了您尚未安装的插件，这就是您收到该错误的原因。

@babel/preset-env 和 @babel/preset-react 可能会完成您需要担心的一切，因此只要在 Webpack 配置中安装并引用它们，您就可以开始了。

Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

Error: Cannot find module 'babel-preset-react' - If you want to resolve "react", use "module:react"

reactjs

webpack

babeljs