Question

我想用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"]
}

由于

Answer 1

您需要在您的网络包配置中添加“提案阶段”（允许使用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"]
}

Webpack无法读取ReactJS道具

1 个答案: