关于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’
之前已经安装过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”
]
问题解决。
上一篇: C语言局部变量,全局变量,静态变量,动态变量的区别与联系
下一篇: UNIX 环境高级编程笔记之线程