错误：找不到模块'巴贝尔-预设-反应'-如果你想解决"反应"，使用"模块：反应"

Question

我已经处理了所有关于这个问题的问题，到目前为止我还没有解决这个问题。

我正在学习关于React的Pluralsight课程，示例应用程序是从头开始手工构建的；这意味着每个依赖项都是在不使用任何CLI的情况下手动添加的。由于课程有点陈旧，我不得不花相当长的时间升级巴贝尔的大部分软件包，直到我在运行webpack时遇到这个问题。

这是包的依赖项列表。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'
]

我得到的完整错误如下：

错误/lib/components/app。jsx模块生成失败（来自./node_modules/babel loader/lib/index.js）：错误：找不到模块“babel preet react”

• 如果你想解决反应，使用模块：反应
• 你是说“巴贝尔/反应”吗？at函数。模块。_resolveFilename（内部/模块/cjs/loader.js:636： 15）在解决（C：\用户\sromero\文档\学习\反应\高级-反应\node_modules\v8编译-缓存\v8-compile-cache.js:164： 23）在解决标准化名称（C：\用户\sromero\文档\学习\反应\高级-反应\node_modules@babel\核心##########################################################################################################################################################################-2/>\core\lib\config\file\plugins.js:78： 20）at loadPreset.next（）at createdescription ptor（C：\用户\sromero\Documents\学习\React\高级反应\node_modules@babel\core\lib\config\config-descriptors.js:187： 16）at createDescriptor.next（）在步骤（C：\用户\sromero\Documents\学习\反应\高级-反应\node_modules\gensync\index.js:261： 32）处评估Async（C：\用户\sromero\Documents\学习\反应\高级-反应\node_modules\gensync\index.js:291： 5）

为了完整起见，应用程序。错误所指的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

babel键进入您的包。json是为巴别塔6设计的。x和引用了您尚未安装的插件，这就是为什么会出现该错误。

@babel/preset-env和@babel/preset-react可能会完成你需要担心的一切，所以只要在Webpack配置中安装和引用这些，你就可以走了。