欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

关于webpack安装babel后编译react报错ERROR in ./app/main.js Module build failed (from ./node_modules/babel-load

程序员文章站 2022-05-12 12:30:42
...

在学习webpack编译文件时
首先报错的提示为:
ERROR in ./app/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module ‘@babel/core’
关于webpack安装babel后编译react报错ERROR in ./app/main.js Module build failed (from ./node_modules/babel-load
之前已经安装过babel-core如下
Babel安装

// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react

在webpack中的配置如下

module.exports = {
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env", "react"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    }
  }

入口文件main.js
是一个react入口文件

import React from 'react'
import {render} from 'react-dom'
import Greeter from './Greeter'
render(<Greeter />, document.getElementById('root'))

原因参考babel版本冲突解决

采用第一种升级版本的方法
执行命令

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

将相关版本更新到最新
webpack的配置改为

presets: [
“@babel/env”, “@babel/react”
]

问题解决。
关于webpack安装babel后编译react报错ERROR in ./app/main.js Module build failed (from ./node_modules/babel-load
关于webpack安装babel后编译react报错ERROR in ./app/main.js Module build failed (from ./node_modules/babel-load

相关标签: 前端框架