[英]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.