我想用webpack命令npm run dev
运行我的ReactJS应用程序但是当我运行命令时,我发现了这个错误:
ERROR in ./src/js/services/reducers/login/auth.js
Module build failed: SyntaxError: Unexpected token (16:10)
14 | access: {
15 | token: action.payload.access,
> 16 | ...jwtDecode(action.payload.access),
| ^
17 | },
18 | refresh: {
19 | token: action.payload.refresh,
产生此错误的文件是:
import jwtDecode from 'jwt-decode';
import * as auth from '../../actions/login/auth';
const initialState = {
access: undefined,
refresh: undefined,
errors: {},
};
export default (state = initialState, action) => {
switch (action.type) {
case auth.LOGIN_SUCCESS:
return {
access: {
token: action.payload.access,
...jwtDecode(action.payload.access),
},
refresh: {
token: action.payload.refresh,
...jwtDecode(action.payload.refresh),
},
errors: {},
};
case auth.TOKEN_RECEIVED:
return {
...state,
access: {
token: action.payload.access,
...jwtDecode(action.payload.access),
},
};
case auth.LOGIN_FAILURE:
case auth.TOKEN_FAILURE:
return {
access: undefined,
refresh: undefined,
errors:
action.payload.response || { non_field_errors: action.payload.statusText },
};
default:
return state;
}
};
我认为这可能是我的webpack的配置。也许webpack无法读取React中的道具?我应该在我的网络包中添加一些规则吗?
修改
这是我的实际网络包
// We are using node's native package 'path'
// https://nodejs.org/api/path.html
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// Constant with our paths
const paths = {
DIST: path.resolve(__dirname, 'dist'),
SRC: path.resolve(__dirname, 'src'),
JS: path.resolve(__dirname, 'src/js'),
PUBLIC: path.resolve(__dirname, 'public'),
};
// Webpack configuration
module.exports = {
entry: path.join(paths.JS, 'app.jsx'),
output: {
path: paths.DIST,
filename: 'app.bundle.js',
},
// Tell webpack to use html plugin
plugins: [
new HtmlWebpackPlugin({
template: path.join(paths.PUBLIC, 'index.html'),
}),
new ExtractTextPlugin('style.bundle.css'), // CSS will be extracted to this bundle file
],
// Loaders configuration
// We are telling webpack to use 'babel-loader' for .js and .jsx files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
// CSS loader for CSS files
// Files will get handled by css loader and then passed to the extract text plugin
// which will write it to the file we defined above
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
use: 'css-loader',
}),
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
// Loader chaining works from right to left
use: ['css-loader', 'sass-loader'],
}),
},
// File loader for image assets -> ADDED IN THIS STEP
// We'll add only image extensions, but you can things like svgs, fonts and videos
{
test: /\.(png|jpg|gif)$/,
use: ['file-loader'],
},
],
},
// Enable importing JS files without specifying their's extenstion
//
// So we can write:
// import MyComponent from './my-component';
//
// Instead of:
// import MyComponent from './my-component.jsx';
resolve: {
extensions: ['.js', '.jsx'],
},
};
EDIT2
我有 .babelrc
{
"presets": ["react", "es2015"]
}
由于
答案 0 :(得分:2)
您需要在您的网络包配置中添加“提案阶段”(允许使用spread operator):
module: {
loaders: [
{
// ...
query: {
presets: ["es2015", "react", "stage-2"]
}
}
]
}
此外,它应作为依赖项添加到package.json
:
npm install --save babel-preset-stage-2
<强> UPD 强>
如果在项目中使用它,可以将其添加到.babelrc
文件中,而不是webpack配置:
{
"presets": ["react", "es2015", "stage-2"]
}