[英]ReactJS Module build failed: SyntaxError: Unexpected token - ReactDOM.render
為什么我在下面收到此錯誤? 我的聲明ReactDOM.render(<App />, container);
是 100% 合法的代碼。
我的 github 倉庫: https : //github.com/leongaban/react_starwars
app.js 文件
import react from 'react'
import ReactDom from 'react-dom'
import App from 'components/App'
require('index.html');
// Create app
const container = document.getElementById('app-container');
// Render app
ReactDOM.render(<App />, container);
組件/應用程序文件
import React from 'react'
const App = () =>
<div className='container'>
<div className='row'>
</div>
<div className='row'>
</div>
</div>;
export default App;
我的 webpack.config
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
]
};
使用它作為你的 webpack 配置文件
const webpack = require('webpack');
const path = require('path');
module.exports = {
entry: [
'./src/app.js'
],
output: {
path: path.resolve(__dirname, './build'),
filename: 'app.bundle.js',
},
module: {
loaders: [
{
test: /\.html$/,
loader: 'file-loader?name=[name].[ext]',
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
],
},
plugins: [
new webpack.NamedModulesPlugin(),
]
};
您缺少預設
我遇到了同樣的錯誤,我只需要將一個 .babelrc 文件添加到包含以下內容的項目路徑(與 package.json 相同的位置):
{
"presets": [
"env",
"react"
],
"plugins": [
"transform-class-properties"
]
}
為 jsx 語法安裝 babel-preset-react。
npm install babel-preset-react
預設
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015']
}
}
]
或者,您可以將預設放在項目根目錄的 .babelrc 文件中。 當然你需要先安裝它。
像這樣/path/to/your/project/.babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
使用以下內容在根文件夾中添加.babelrc
,並確保它是 ' .babelrc
' 不是 'preset'
{
"presets" : ["@babel/preset-env", "@babel/preset-react"]
}
這是我的webpack.config.js
供參考:
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: 'babel-loader',
options: { presets: ["@babel/env"]}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ['*', '.js', '.jsx']},
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js'
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hotOnly: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
}
Babel-loader v8 需要@babel v7 才能工作package.json
"devDependencies": {
"@babel/cli": "^7.10.4",
"@babel/core": "^7.10.4",
"@babel/preset-env": "^7.10.4",
"@babel/preset-react": "^7.10.4",
"babel-loader": "^8.1.0"}
嘗試將resolve
屬性添加到您的 webpack 配置文件中:
resolve: {
extensions: ['.js', '.jsx']
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loaders: ["babel-loader"]
}
]
}
如果有人與 CRA 合作並收到此錯誤。 解決方案在這里。
轉到package.json
並添加babel
配置。 如果我看起來不那么慷慨,下面是代碼
"babel": {
"presets": [
"react-app"
]
}
保持 CRA 設置的其余部分不變。 實際上 CRA 使用它自己的自定義預設react-app
,這就是webpack.config.js
文件中的設置。 因此不需要其他預設。
我遇到了這個問題,上述答案都沒有幫助。
我有一個符號鏈接的文件夾——我的代碼在 D:/Code 上,但我通過符號鏈接從 C:/Code 運行。
其中一個 js 包正在識別鏈接並嘗試在 D 中運行並失敗。
我不得不從 D: 而不是從符號鏈接路徑打開代碼,問題就消失了。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.