1

OS: Windows 10 Pro
NPM Version: 3.8.6

So, when I run npm start, the app runs fine. But when I run npm run build, I get the following error message:

λ npm run build

> learn-redux@1.0.0 build C:\Users\*****\Documents\Projects\learn-redux
> npm run clean && npm run build:webpack


> learn-redux@1.0.0 clean C:\Users\*****\Documents\Projects\learn-redux
> rimraf dist


> learn-redux@1.0.0 build:webpack C:\Users\*****\Documents\Projects\learn-redux
> set NODE_ENV=production && webpack --config webpack.config.prod.js

Hash: e7a3bc9c356b59e5b8fb
Version: webpack 1.14.0
Time: 30691ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   710 kB       0  [emitted]  main
bundle.js.map  5.51 MB       0  [emitted]  main
   [0] multi main 28 bytes {0} [built]
    + 583 hidden modules

ERROR in ./client/reducers/comments.js
Module build failed: SyntaxError: C:/Users/*****/Documents/Projects/learn-redux/client/reducers/comments.js: Unexpected token (30:6)

  28 |     return {
  29 |       // Current state
> 30 |       ...state
     |       ^
  31 |     };

My code is as follows:

function comments(state = {}, action) {
  if (typeof action.postId !== 'undefined') {
    return {
      // Current state
      ...state
    };
  }

  return state;
}

and my webpack config is as follows:

var path = require('path');
var webpack = require('webpack');

module.exports = {
  devtool: 'source-map',
  entry: [

    './client/reduxstagram'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': "'production'"
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compressor: {
        warnings: false
      }
    })
  ],
  module: {
    loaders: [
    // js
    {
      test: /\.js$/,
      loaders: ['babel'],
      include: path.join(__dirname, 'client')
    },
    // CSS
    { 
      test: /\.styl$/, 
      include: path.join(__dirname, 'client'),
      loader: 'style-loader!css-loader!stylus-loader'
    }
    ]
 }
};

my .babelrc file is as follows:

{
  "env": {
    "production": {
      "plugins": [
        "transform-object-rest-spread"
      ]
    }
  }
}

How can I resolve this?

TheoG
  • 1,498
  • 4
  • 30
  • 54
  • Check: http://stackoverflow.com/questions/33745118/browserify-babel-6-gulp-unexpected-token-on-spread-operator – Shota Feb 13 '17 at 20:52
  • 1
    That's experimental syntax, not ES6. You should use `Object.assign` instead, or add the respective Babel plugin for object spread. – Bergi Feb 13 '17 at 20:57
  • @Bergi Thanks for the heads up. – TheoG Feb 13 '17 at 22:45
  • @Felix, this not a duplicate issue, as the project alreeady has the save-dev babel-plugin-transform-object-rest-spread plugin installed, and this issue still persists with it in use. Please remove the duplication status. – TheoG Feb 14 '17 at 10:16
  • The error shows that either it isn't installed or Babel is not configured to load it. What does your babelrc look like ? – Felix Kling Feb 14 '17 at 15:22
  • @FelixKling I have amended my original post to show my .babelrc file. – TheoG Feb 15 '17 at 20:55
  • Is the file picked up by the babel loader? Is it a production build? – Felix Kling Feb 15 '17 at 21:03
  • @FelixKling In both instances,yes. – TheoG Feb 15 '17 at 21:50

0 Answers0