Webpack is not building because of javascript spread operator

Question

I get unexpected token error for spread operator, how can I do it build the bundle without removing the code ?

Here is my webpack config file

 Unexpected token (85:32)

  83 |   console.log(
  84 |     'return value 1 ' +
> 85 |       JSON.stringify({ value: { ...this.value(), ...newState } })
     |                                 ^
  86 |   )
  87 |   return {
  88 |     value: {

var path = require('path')

module.exports = {
  entry: path.resolve(__dirname, 'partner/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/, // Check for all js files
        loader: 'babel-loader',
        query: {
          presets: ['babel-preset-es2015'].map(require.resolve)
        },
        exclude: /node_modules\/(?!other-module)/
      }
    ]
  },
  stats: {
    colors: true
  },
  devtool: 'source-map',
  resolve: { symlinks: false }
}

However this webpack works but I need to use previous one

module.exports = {
  entry: {
    partner: '../workout-example/partner/index.js',
    test: '../workout-example/test/example.spec.js'
  },
  target: 'web',
  mode: 'development',
  node: {
    fs: 'empty'
  },
  output: {
    filename: '[name]_bundle.js'
  }
}

Nick Prozee · Accepted Answer · 2018-03-22T08:40:02.303

0

You should change the spread operator to Object.assign()

Example from mozilla

const object1 = {
  a: 1,
  b: 2,
  c: 3
};

const object2 = Object.assign({}, object1);

console.log(object2.c);
// expected output: 3

You're JS version probably does not support the latest es6 syntax

Example from with you're code

JSON.stringify({ value: { Object.assign({}, this.value(), newState) } })

edited Mar 22 '18 at 08:40

answered Mar 22 '18 at 08:34

Nick Prozee

2,823
4
22
49

What you mean its not supported ? Actually it works with another config (I added in original question) – Rasim Avcı Mar 22 '18 at 08:47
Take a look at the answer from @str – Nick Prozee Mar 22 '18 at 08:59
I changed presets to babel-preset-es2017 but get an error saying that can not find module babel-preset-es2017 – Rasim Avcı Mar 23 '18 at 07:35
Int he link you send, it says babel-preset-es2017 is depracated so I see babel advices to use env instead of yearly solution. when I use presets: ['@babel/preset-env'] in webpack config instead of babel-preset-es2015 I get -> Cannot find module '@babel/preset-env' – Rasim Avcı Mar 26 '18 at 11:02
Did you run: npm install babel-preset-env --save – Nick Prozee Mar 26 '18 at 11:06
we use yarn and monorepo and install via lerna. So I tried lerna add --dev babel-preset-env and lerna add --dev babel-preset-es2017 but get this for both of them -> bash: ./node_modules/.bin/lerna: No such file or directory – Rasim Avcı Mar 26 '18 at 11:17
npm install @babel/preset-env and have "presets": ["@babel/preset-env"] in your configuration. – Nick Prozee Mar 26 '18 at 11:21
I installed with npm install babel-preset-env --save under subpackage (we use monorepo) and write presets: ['babel-preset-env'].map(require.resolve) in webpack config file but still get error for spread operator – Rasim Avcı Mar 26 '18 at 11:21
so whats the difference between @babel/preset-env and babel-preset-env ? I did it, installed @babel/preset-env and write @babel/preset-env in webpack config but this time get another error -> Module build failed: Error: Cannot find module '@babel/core' – Rasim Avcı Mar 26 '18 at 11:22
use **@babel/preset-env** as the package name instead of babel-preset-env – Nick Prozee Mar 26 '18 at 11:23
This is the stable version – Nick Prozee Mar 26 '18 at 11:23
Yeah I tried with @babel/preset-env in the webpack config as I wrote, but get module not foud error. It gives same error even after I tried -> npm install --save-dev babel-core – Rasim Avcı Mar 26 '18 at 11:26
Here is a doc on how to migrate from es2015 to babel-env: https://babeljs.io/env/ – Nick Prozee Mar 26 '18 at 11:33
Thanks but I already read that page today and there is no much thing on that page, my babelrc files is already env and I do not target specific browser versions – Rasim Avcı Mar 26 '18 at 11:37

score 0 · Answer 2 · answered Mar 22 '18 at 08:40

0

Object Rest/Spread Properties is not an ECMAScript feature yet (but will be very soon).

To use it, you need to add the corresponding Babel plugin.

answered Mar 22 '18 at 08:40

str

42,689
17
109
127

I think this should be the accepted answer since my answer does require you to change any code – Nick Prozee Mar 22 '18 at 09:17

Webpack is not building because of javascript spread operator

2 Answers2