Question

我正在跟着这个webpack4 / react教程：

https://www.youtube.com/watch?v=deyxI-6C2u4

我一直严格遵循直到他运行npm的那一部分开始。区别在于，他的应用程序运行了，我的得到了错误：

找不到模块'@ babel / core'

完整错误：

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (C:\Users\joeyf\Desktop\Code\Github\webpack4-sample\node_modules\babel-loader\lib\index.js:5:15)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js main[2]

我尝试重新安装babel-core，但仍然找不到。这是我的package.json：

{
  "name": "webpack4-sample",
  "version": "1.0.0",
  "description": "A sample setup of Webpack4 with React and Babel",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "author": "Joey Fenny",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  },
  "devDependencies": {
    "babel-core": "^7.0.0-rc.4",
    "babel-loader": "^8.0.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  }
}

我的webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index_bundle.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: path.join(__dirname, '/node_modules'),
            use: {
                loader: 'babel-loader'
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

这是git repo的链接：

https://gitlab.com/jfny/webpack4-sample

有人知道发生了什么吗？谢谢。

Answer 1

执行type="number"。 babel更改了他们的软件包，因此您的input与npm install @babel/core --save

不一样

Answer 2

最近将Babel升级到版本7，更改了节点程序包的命名。

例如，现在您必须安装npm install --save-dev @babel/core @babel/preset-env和npm install --save-dev @babel/preset-react才能使其与React一起使用。

然后您可以在 .babelrc 文件中使用它们：

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

或者作为替代方案，当您的 package.json 中没有 .babelrc 时：

...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
},
"devDependencies": {
...

如果您想进一步了解它，可以查看最近的Webpack + Babel + React setup。

Answer 3

我可以使用以下命令解决此问题

npm install @babel/core --save

Answer 4

babel-loader @ 8需要Babel 7.x（软件包“ @ babel / core”）。如果您想使用Babel 6.x（“ babel-core”），则应安装“ babel-loader @ 7”。

Answer 5

就我而言，我必须卸载babel 6

npm uninstall --save-dev babel-cli  babel-core babel-polyfill babel-preset-es2015 babel-preset-stage-2 babel-register

然后重新安装babel 7

npm i  --save-dev  @babel/cli  @babel/core @babel/node  @babel/polyfill  @babel/preset-env

对我有用。

Answer 6

对于那些与babel / node一起使用@ babel / core的人：我刚刚使用npm i @babel/core --save-dev安装了@ babel / core，但是当我尝试使用babel-node时，它无法识别@ babel / core软件包，我卸载了@ babel / core并再次使用npm i @babel/core --save进行了安装，它再次起作用！

Answer 7

尝试安装npm install @ babel / core --save 如果不起作用，请尝试卸载node_modules并重新安装

Answer 8

我通过执行以下命令从 dev Dependencies 中删除了所有babel模块，解决了相同的错误：

npm install -D babel-loader @babel/core @babel/preset-env

如果上面的命令不起作用，您可以参考此链接：

[https://github.com/babel/babel/issues/8599#issuecomment-417866691]

Answer 9

我删除了现有的 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

并添加了他们的新名称 {{1}} 对我来说非常好。

Answer 10

我固定为：

 npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D

Answer 11

通过在Windows %USERPROFILE%\.quokka上运行来进入

~/.quokka配置仅限于config.json文件和~/quokka/node_modules中存在的任何软件包。

将以下内容放入config.js，

{
  "pro":true, 
  "babel": {
    "presets": ["@babel/preset-env", " @babel/preset-react"],
    "plugins": [
      ["@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" }],
      ["@babel/plugin-proposal-decorators", { "legacy": true }],
      ["@babel/plugin-proposal-class-properties", { "loose": true }]
    ]
  }
}

Answer 12

我已经处理了几个小时，当我在package.json文件中添加“ devDependencies”部分并将@types依赖项移至该问题时，它神秘地消失了。

Answer 13

如果您有 React 应用程序并且出现错误，请将您的 babel 配置更改为以下内容：

 {
"presets": [
    [
        "@babel/preset-env",
        {
            "useBuiltIns": "entry",
            "corejs": 3,
            "modules": false
        }
    ],
    "@babel/preset-react"
],
"plugins": [
    ["@babel/transform-async-to-generator"],
    ["@babel/plugin-transform-runtime"],
    ["@babel/syntax-dynamic-import"],
    ["@babel/plugin-transform-classes", {
    "loose": true
    }],
    [
        "babel-plugin-transform-builtin-extend",
        {
            "globals": ["Error"]
        }
    ]
]

}

Answer 14

我的两分钱，对于开始使用 react、webpack、babel、jsx 的人，我有问题 npm run build

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

当您尝试逐步安装每个组件时，您可能会遇到软件包之间的版本冲突，即您最终可能会得到这样的 package.json 文件

  "dependencies": {
    "@babel/core": "^7.13.15",
    "@babel/preset-env": "^7.13.15",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^7.1.5",
    "webpack": "^5.33.2",
    "webpack-cli": "^4.6.0"

显然，报告加载 babel-loader 失败并不是因为我没有安装 babel-loader。因此，我想，我会尝试使用 npm i babel-loader 重新安装它。

而且，我收到了这条消息

$ npm install babel-loader
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: indecision-app@1.0.0
npm ERR! Found: webpack@5.33.2
npm ERR! node_modules/webpack
npm ERR!   webpack@"^5.33.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer webpack@"2 || 3 || 4" from babel-loader@7.1.5
npm ERR! node_modules/babel-loader
npm ERR!   babel-loader@"^7.1.5" from the root project

我注意到我使用的是 Webpack v.5。因此，我从 babel-loader 文件中删除 package.json 并再次执行 npm i babel-loader。

这一次，npm run build 成功了！

找不到模块'@ babel / core'

14 个答案: