React 构建错误:模块构建失败(来自 ./node_modules/babel-loader/lib/index.j

Question

我正在遵循教程，当我尝试构建反应时，我收到一个错误。

Module build failed (from ./node_modules/babel-loader/lib/index.js)
5 | ReactDOM.render(
> 6 |     <App />,
|     ^
7 |     document.getElementById('root')
8 | );

我发现了类似的问题，我试图基于此解决问题，但无济于事。 这是我的webpack.config.js：

module.exports = {
entry: './index.js',
output:{
path: __dirname,
filename: 'bundle.js'
},
module:{
rules:[
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: '/node_modules/'
}
]
}
}

下面我有package.json，"devDependencies"是我在以前的解决方案中找到的。

{
"name": "rtsupport",
"version": "1.0.0",
"description": "Realtime support frontend",
"main": "./index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"develop": "webpack --mode development --watch",
"build": "webpack --mode development"
},
"author": "",
"license": "ISC",
"dependencies": {
"node": "^10.15.2",
"react-dom": "^16.8.4"
},
"devDependencies": {
"@babel/core": "^7.0.0-bridge.0",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}
}

这些是我最初的"devDependencies"

"devDependencies": {
"@babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5"
}

我的节点版本是：v11.10.1

尝试以下建议后：

rules:[
{
test: /.(js|jsx)$/,
exclude: '/node_modules/',
use: [
{ loader: 'babel-loader' }
]
}
]

我仍然收到同样的错误。

Answer 1

这个问题可以通过设置每个 babel 依赖项来解决

>=7.8.7

"devDependencies": {
"@babel/cli": "^7.13.10",
"@babel/core": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@babel/preset-react": "^7.12.13",
}

Answer 2

好的，如果您打算在其中使用 JSX，我认为您的 webpack 测试需要包含.js文件：

test: /.(js|jsx)$/

Answer 3

经过一整天的黑客攻击和浏览这个网站，我找到了解决方案。

module:{
rules:[
{
test: /.jsx?$/,
exclude: '/node_modules/',
loader: 'babel-loader',
query:
{
presets:['react']
}  
}
]
}

和包.json部分：

"devDependencies": {
"@babel/core": "^7.3.4",
"babel": "^5.8.23",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-react": "^6.24.1",
"babel-preset-react-app": "^7.0.2",
"react": "^16.8.4",
"webpack": "^4.29.6",
"webpack-cli": "^3.2.3"
}

Answer 4

使用该配置，您告诉仅"翻译".jsx文件，并且由于您的主文件是index.js，因此他没有加载它，请尝试添加此配置：

有了这个，您可以添加要由加载器解析的JS和JSX文件

rules: [
{
exclude: /node_modules/,
test: /.js|.jsx?$/,
use: [
{ loader: 'babel-loader' }
]
}
]

我的错，我以为你有一个 babelrc，我忘了你可以在与你的 wepback.config 相同的文件夹级别上创建一个带有".babelrc"名称的文件，在这里你可以指定你的加载配置，并告诉 babel 加载"反应"插件

{
"presets": [
"stage-0",
"react",
"es2015"
],
"plugins": [
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-rest-spread",
"transform-es2015-destructuring"
],
"env": {
"debug": true
}
}