logo标签列表

找不到模块“@babel/core”。

node.jsreactjsnpmwebpackbabeljs
112

我正在跟随这个 webpack4/react 教程:

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

我完全按照教程操作，但在运行 npm start 时出现了错误。与视频中不同的是，他的应用程序可以运行，而我的却出现了以下错误提示：

Cannot find module '@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仓库的链接:

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

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

14个回答
206

试着运行这个。

npm install @babel/core --save

Babel 更改了他们的包，所以你的 babel-core 将不同于 @babel/core。

20
针对偶然来到这里的人，由于最近从babel 6升级到7的重大版本更新，babel-loader分别分裂成版本7和8。如果使用"ncm -u"意外升级到babel-loader 8导致出现问题，只需通过"npm install babel-loader@7"获取babel-loader 7即可解决。安装说明已在此清楚标明：https://github.com/babel/babel-loader - Thomas Cheng
1
我刚刚运行了这个命令 yarn add @babel/core --save，现在它可以工作了，虽然它已经安装好了，但我不知道为什么。 - Syed Amir Ali
52

最近Babel升级到了7版本，更改了节点包的名称。

例如，现在您需要安装

npm install --save-dev @babel/core @babel/preset-env
and
npm install --save-dev @babel/preset-react

要在React中让它工作，你可以在.babelrc文件中使用以下内容：

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

或者作为另一种选择，当没有.babelrc文件时，在你的package.json中：

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

如果你想更深入了解，可以查看最近的Webpack + Babel + React设置。

个人而言，我只需添加“babel-loader”包，错误便消失了！ - corentin_chap
7

我移除了现有的 npm uninstall babel-core babel-preset-env babel-preset-react

并添加了它们的新名称 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react 这样对我来说完美地工作。

5

如果你在使用babel-node的同时也使用@babel/core： 我刚使用npm i @babel/core --save-dev安装了@babel/core，但当我尝试使用babel-node时它无法识别@babel/core包。我卸载了@babel/core并再次使用npm i @babel/core --save安装，然后它就可以工作了!

4
在我的情况下，我需要卸载 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

对我来说有效。

2

对于刚开始使用 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。因此，我从package.json文件中删除了babel-loader并再次执行了npm i babel-loader。

这一次，npm run build成功了！

1

我能够使用以下命令解决这个问题

npm install @babel/core --save
1

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

0
如果您有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"]
        }
    ]
]

}

0

我用以下方法修复了：

 npm install --save-dev babel-loader@7 babel-core babel-preset-env webpack webpack-cli -D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接