反应构建问题,。/ src / index.js中的ERROR模块构建失败(来自./node_modules/babel-loader/lib/index.js):

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了反应构建问题,。/ src / index.js中的ERROR模块构建失败(来自./node_modules/babel-loader/lib/index.js):相关的知识,希望对你有一定的参考价值。

我正在尝试使用Webpack 4从头开始构建反应应用程序

我尝试构建时遇到以下错误。虽然已经安装了babel-core,但我也尝试安装@ 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:538:15)
    at Function.Module._load (module.js:468:25)
    at Module.require (module.js:587:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/digvijay.upadhyay/digvijayu/react_webpack_4_from_scratch/node_modules/babel-loader/lib/index.js:5:15)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 500 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 489 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ 「wdm」: Failed to compile.

webpack.config.js

const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
  template: "./src/index.html",
  filename: "./index.html"
});

module.exports = {
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  plugins: [htmlPlugin]
};

编辑:将包json文件添加到问题package.json

"devDependencies": {
    "babel-core": "^6.26.3",
    "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"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "path": "^0.12.7",
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

{“name”:“boiler-plate-react-webpack-4”,“main”:“index.js”,“scripts”:{“start”:“webpack-dev-server --mode development --open - -display-error-details“,”build-dev“:”webpack --mode development“,”build-prod“:”webpack --mode production“,”test“:”echo“错误:没有指定测试 “&& exit 1”},“devDependencies”:{“babel-core”:“^ 6.26.3”,“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”},“依赖项”:{“@ babel / core”:“^ 7.0.0”,“path”:“^ 0.12。 7“,”反应“:”^ 16.4.2“,”react-dom“:”^ 16.4.2“}}

答案

解决了:

问题是包babel-loader,最新版本预计@ babel / core。将版本降级为7.x,现在很好

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "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"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }
另一答案

是的,babel-loader 8需要babel 7,令人困惑。如果你想使用新的babel,它非常简单。你会做这样的事情:

"devDependencies": {
    "babel-loader": "^8.0.0",
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",,
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.6"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2"
  }

除了您定义它们之外,还可以对您的babel预设进行一些小改动:

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

您可以在这里看到我更新为babel 7的项目的差异:https://github.com/ccnmtl/astro-interactives/commit/97b31ca7948d177d7f41439bdbeb0a54cd3e69da

另一答案

另一种解决方法是保持@babel/core并安装babel-core : ^7.0.0-bridge.0。它是一个桥接软件包,允许您支持以前的babel软件包并将您的babel核心更新到最新版本。然后你也可以将你的babel-loader更新为LTS。

以上是关于反应构建问题,。/ src / index.js中的ERROR模块构建失败(来自./node_modules/babel-loader/lib/index.js):的主要内容,如果未能解决你的问题,请参考以下文章

如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”

Rails Tailwind 设置:模块构建失败(来自 ./node_modules/postcss-loader/src/index.js):

Webpack(模块构建失败)

安装反应后显示错误:目标容器不是 DOM 元素

反应模块构建失败

笑话:如何取消模拟 index.js 文件中列出的组件?