[英]ReactJS - Unexpected Token with 3 comma
我想編譯我的React前端應用程序,但是遇到一些關於“ ...”語法的錯誤:
ERROR in condition.jsx
Module build failed: SyntaxError: Unexpected token (25:10)
23 | show_table : undefined,
24 | fa_count : 0,
> 25 | ...this.state
| ^
26 | }
condition.jsx擴展了(帶有OOP)另一個組件,因此我需要.... state將父狀態與本地狀態合並。
當使用npm start啟動它時,它可以完美工作,但是編譯器似乎不需要該語法。
更新:這是我當前的Webpack設置:
const webpack = require('webpack');
const path = require('path');
const Uglify = require("uglifyjs-webpack-plugin");
var plugins = [];
plugins.push(new Uglify());
var config = {
context: __dirname + '/src',
entry: {
javascript: "./index.js",
},
plugins: plugins,
output: {
path: path.join(__dirname,'../static/js/'),
filename: 'bundle.js',
},
devServer: {
inline: true,
port: 8080
},
resolveLoader: {
modules: [path.join(__dirname, 'node_modules')]
},
module: {
loaders: [
{
test:/\.(js|jsx)?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['env','react']
}
},
{
test: /\.css$/,
loader: 'style-loader'
},
{
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
{
test: /\.svg$/,
use: [
{
loader: "babel-loader"
},
{
loader: "react-svg-loader",
options: {
jsx: true // true outputs JSX tags
}
}
]
}
]
},
}
module.exports = env => {
return config;
}
使用以下命令啟動:
./node_modules/.bin/webpack --config webpack.config.js
您沒有透露您的配置。 但是我假設babel和webpack。 這似乎與您的babel配置有關。 試試這個插件:
https://www.npmjs.com/package/babel-plugin-transform-object-rest-spread
安裝后,添加
"plugins": ["transform-object-rest-spread"]
到您的.babelrc文件,然后再次運行webpack。
在一條評論中,您說您沒有任何babelrc。 然后,我已經重新閱讀了Webpack官方文檔,並從那里獲取了以下示例代碼:
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [require('@babel/plugin-proposal-object-rest-spread')]
}
}
}
]
安裝babel-plugin-transform-object-rest-spread
軟件包后,您可以按照以下示例代碼來更新Webpack配置。 了解更多信息: Webpack Loader
這是對我有用的組合,我改用babel-preset-stage-2 。
在webpack.config.js中:
....
module: {
rules: [
{
test:/\.(js|jsx)?$/,
use: ['babel-loader']
},
....
]
}
....
我在根文件夾中創建一個.babelrc
文件,其內容為:
{
"presets": ["env", "react", "stage-2"],
....
}
這是我的package.json
文件:
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server --open"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"react-hot-loader": "^4.3.3",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.15.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.4"
},
"dependencies": {
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"uuid": "^3.3.2"
}
}
希望它對您有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.