Webpack无法读取ReactJS道具

Question

I want to run my ReactJS app with webpack command npm run dev but when I run the command, I've got this error:

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,

The file that produces this error is:

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;
  }
};

I think that may be it could be the configuration of my webpack. Maybe the webpack can not read the prop in React? Should I add some rule for this in my webpack?

EDIT

This is my actual webpack

// 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

I have this .babelrc

{
  "presets": ["react", "es2015"]
}

Thanks

Answer 1

You need to add "proposal stage" (which would allow using of spread operator ) to your webpack configuration:

module: {
  loaders: [
    {
      // ...
      query: {
        presets: ["es2015", "react", "stage-2"]
      }
    }
  ]
}

Also, it should be added as a dependency in package.json :

npm install --save babel-preset-stage-2

UPD

Instead of webpack config, this may be added to .babelrc file if it is used in the project:

{
  "presets": ["react", "es2015", "stage-2"]
}