如何解决'未捕获的错误：模块构建失败（来自./node_modules/babel-loader/lib/index.js）：'

Question

我在React应用程序中将babel与webpack一起使用。我已安装满足条件的“ babel-loader”：“ ^ 8.0.5”和“ @ babel / core”：“ ^ 7.4.0”

"babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'".
节点：v10.5.0npm：v6.1.0

使用node --experimental-modules lib/server.mjs运行应用程序支持es6模块

package.json

{
  "name": "advanced-react",
  "version": "1.0.0",
  "description": "Advanced React",
  "main": "lib/server.js",
  "author": "Sai",
  "license": "MIT",
  "scripts": {
    "dev": "nodemon --exec babel-node lib/server.mjs",
    "webpack": "webpack -wd"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.15.3",
    "eslint-plugin-react": "^7.12.4"
  },
  "dependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.4.0",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/polyfill": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "@babel/preset-stage-2": "^7.0.0",
    "@babel/register": "^7.4.0",
    "@babel/runtime": "^7.4.2",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "ejs": "^2.6.1",
    "express": "^4.16.4",
    "react": "^16.8.5",
    "react-dom": "^16.8.5",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}
。babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "env",
    "react",
    "stage-2"
  ],
  "plugins": ["transform-es2015-modules-commonjs"]
}
webpack.config.js

const path = require('path');

const config = {
  entry: './lib/components/index.js',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js)$/, use: ['babel-loader']}
    ]
  }
};

module.exports = config;
但是当我启动应用程序时遇到此错误

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:594:15)
    at Function.Module._load (internal/modules/cjs/loader.js:520:25)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at Object.<anonymous> (D:\learnings\advanced-react\node_modules\babel-loader\lib\index.js:10:11)
    at Module._compile (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (D:\learnings\advanced-react\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
    at loadLoader (D:\learnings\advanced-react\node_modules\loader-runner\lib\loadLoader.js:18:17)
    at iteratePitchingLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
    at runLoaders (D:\learnings\advanced-react\node_modules\loader-runner\lib\LoaderRunner.js:365:2)
    at NormalModule.doBuild (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:280:3)
    at NormalModule.build (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModule.js:427:15)
    at Compilation.buildModule (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:635:10)
    at moduleFactory.create (D:\learnings\advanced-react\node_modules\webpack\lib\Compilation.js:1021:12)
    at factory (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:405:6)
    at hooks.afterResolve.callAsync (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:155:13)
    at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (D:\learnings\advanced-react\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:6:1)
    at AsyncSeriesWaterfallHook.lazyCompileHook (D:\learnings\advanced-react\node_modules\tapable\lib\Hook.js:154:20)
    at resolver (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:138:29)
    at process.nextTick (D:\learnings\advanced-react\node_modules\webpack\lib\NormalModuleFactory.js:342:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)
    at eval (webpack-internal:///./lib/components/index.js:1:7)
    at Object../lib/components/index.js (http://localhost:8080/bundle.js:96:1)
    at __webpack_require__ (http://localhost:8080/bundle.js:20:30)
    at http://localhost:8080/bundle.js:84:18
    at http://localhost:8080/bundle.js:87:10

我在React应用程序中将babel与webpack一起使用。我已安装“ babel-loader”：“ ^ 8.0.5”和“ @ babel / core”：“ ^ 7.4.0”，它们满足以下条件：“ babel-loader @ 8需要Babel 7.x（ ..

Answer 1

yarn add @babel/core  should install the latest version of @babel/core