找不到模块'@babel/core'答案

【问题标题】：Cannot find module '@babel/core'找不到模块'@babel/core'
【发布时间】：2019-02-03 16:22:02
【问题描述】：

我正在关注这个 webpack4/react 教程：

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

在他运行 npm start 的部分之前，我一直在跟踪它。不同的是，他的应用程序运行，而我的应用程序出现错误：

找不到模块'@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

有人知道怎么回事吗？谢谢。

【问题讨论】：

标签： node.js reactjs npm webpack babeljs

【解决方案1】：

我的两分钱，对于开始使用 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成功了！

【讨论】：

【解决方案2】：

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

}

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

通过在 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 }]
    ]
  }
}

【讨论】：

【解决方案5】：

尝试运行它。

npm install @babel/core --save

babel 改变了他们的包，所以你的babel-core 不会和@babel/core 一样。

【讨论】：

只是为了那些碰巧来这里的人，由于最近从 babel 6 到 7 的主要版本更新，babel-loader 分别拆分为版本 7 和 8。如果使用“ncm -u”意外更新 babel-loader 8 导致此问题，只需确保通过“npm install babel-loader@7”获得 babel-loader 7。安装说明在这里清楚地注明：github.com/babel/babel-loader

【解决方案6】：

我修复了：

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

【讨论】：

【解决方案7】：

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

并添加了他们的新名字 npm install --save-dev @babel/core @babel/preset-env @babel/preset-react 这对我来说非常好。

【讨论】：

【解决方案8】：

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

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

如果上面的命令不起作用可以参考这个链接：

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

【讨论】：

【解决方案9】：

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

【讨论】：

【解决方案10】：

最近 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。

【讨论】：

【解决方案11】：

对于那些在 babel-node 旁边使用 @babel/core 的人：我刚刚使用npm i @babel/core --save-dev 安装了@babel/core，但是当我尝试使用babel-node 时它无法识别@babel/core 包，我卸载了@babel/core 并使用npm i @babel/core --save 再次安装它，它又可以工作了！

【讨论】：

【解决方案12】：

就我而言，我必须卸载 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

它对我有用。

【讨论】：

【解决方案13】：

babel-loader@8 需要 Babel 7.x（包'@babel/core'）。如果你想使用 Babel 6.x ('babel-core')，你应该安装 'babel-loader@7'。

【讨论】：

【解决方案14】：

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

npm install @babel/core --save

【讨论】：