如何修复“模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):"?

问题描述

所以我一直在尝试设置 React Js 环境.我正面临 babel 依赖错误.我知道这个问题很常见，有很多可用的答案，但到目前为止，没有一个对我有用.我已经通过互联网搜索以解决它，但它仍然显示相同的错误.

So I have been trying to setup React Js environment. I am facing the babel dependencies error. I know this problem is very common and there are tons of answers available but none of them have worked for me so far.I have searched through the internet to solve it but it still shows the same error.

这是我得到的错误:

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-es2015' from 'D:\my-app'
    at Function.module.exports [as sync] (D:\my-app\node_modules\resolve\lib\sync.js:58:15)
    at resolveStandardizedName (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:101:31)
    at resolvePreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:58:10)
    at loadPreset (D:\my-app\node_modules\@babel\core\lib\config\files\plugins.js:77:20)
    at createDescriptor (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:154:9)
    at items.map (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (<anonymous>)
    at createDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at passPerPreset (D:\my-app\node_modules\@babel\core\lib\config\config-descriptors.js:58:96)
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./index.html] 448 bytes {0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpac

这是我的 .babelrc

This is my .babelrc

    {
    "presets": ["es2015"]
}

webpack.config.js

webpack.config.js

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

module.exports = {
   entry: './main.js',
   output: {
      path: path.join(__dirname, '/bundle'),
      filename: 'index_bundle.js'
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      rules: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}

package.json

package.json

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.31.0"
  }
}

推荐答案

[email protected] 使用 Babel 7.x，即@babel/core@^7.0.0，更重要的是在你的情况下@babel/preset-env@7 替换 babel-preset-env@^1.7.0.

[email protected] uses Babel 7.x, which is @babel/core@^7.0.0, and more importantly in your case @babel/preset-env@7 replaces babel-preset-env@^1.7.0.

你需要确保这样做

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

并更新您的 Babel 配置以使用 @babel/preset-env 而不是 babel-preset-env 类似

and update your Babel config to use @babel/preset-env instead of babel-preset-env with something like

"presets": [
  "@babel/preset-env"
]

注意:对于遇到此问题的其他人，问题也可能是您在 Babel 7 上使用了 Babel 6 的插件/预设.如果您使用第三方 Babel 预设，这可能很难注意到，因为预设的版本可能与 Babel 本身的版本不匹配.

Note: For others coming across this, the issue may also be that you're using plugins/preset from Babel 6 on Babel 7. This may be hard to notice if you're using a third-party Babel preset since the versions of the presets may not match the version of Babel itself.

这篇关于如何修复“模块构建失败(来自 ./node_modules/babel-loader/lib/index.js):"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！