[英]Unexpected token error from Webpack compiling React
我已經看到了幾個看起來很像這樣的問題,但是到目前為止,所有解決方案都沒有幫助。 我試圖加快React的速度。 我嘗試按照我在網上可以找到的每個教程進行操作,包括一些非常簡單,直接的教程。 無論我嘗試什么,我都會收到意外的令牌錯誤。
index.js:
import React from "react";
import ReactDOM from "react-dom";
const title = 'My React page';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
)
的package.json:
{
"name": "swvreact",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development --display-error-details",
"build": "webpack --mode production",
"start": "webpack-dev-server --mode development --open"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-prop-types": "^0.4.0",
"webpack": "^4.3.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
}
}
webpack.config.js:
const webpack = require('webpack');
module.exports = {
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader']
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
};
.babelrc:
{
"presets": [
"env",
"react",
"es2015",
"stage-2"
]
}
錯誤:
ERROR in ./src/index.js
Module build failed: SyntaxError: D:/work/swvreact/swvreact/src/index.js:
Unexpected token (7:4)
5 |
6 | ReactDOM.render(
> 7 | <div>{title}</div>,
| ^
8 | document.getElementById('app')
9 | )
10 |
BabelLoaderError: SyntaxError: D:/work/swvreact/swvreact/src/index.js:
Unexpected token (7:4)
5 |
6 | ReactDOM.render(
> 7 | <div>{title}</div>,
| ^
8 | document.getElementById('app')
9 | )
10 |
at transpile (D:\work\swvreact\swvreact\node_modules\babel-
loader\lib\index.js:65:13)
我嘗試過移動文件,使用配置,使用.js和.jsx文件類型,這些都是我能想到的。 發布的代碼來自我能找到的最簡單的教程,並且似乎是最新的。
我的設置是一台運行Windows 10,Visual Studio Code,Chrome和Firefox以及Windows命令提示符的PC。 所有應用程序都是最新的。 我確定我缺少一些小東西,但是我確實找不到。
如果webpack找不到.babelrc
則會出現此錯誤。 確保文件名中沒有錯字。
您也可以嘗試將babel配置放入package.json
如下所示:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
或像這樣在您的webpack.config.js
添加選項:
test: /\.jsx?$/,
use: {
loader: 'babel-loader',
options: {
presets: [
'env',
'react',
'es2015',
'stage-2',
]
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.