CODEWITHSUNDEEP
javascriptreactjswebpackbabeljsspread-syntax
Paulos3000
Paulos3000

Reputation: 3545

Babel loader error: rest/spread operator not understood

When I try to run my webpack bundle, I get this console error:

BabelLoaderError: SyntaxError: Unexpected token (113:19)

  111 | 
  112 | const render = () => ReactDOM.render(
> 113 |    <TodoApp todos={...store.getState()}/>,
      |                    ^
  114 |    document.getElementById("root")
  115 | )
  116 |

So the spread operator syntax is not understood. However, I have installed the babel-stage-2 preset which I have included in my loaders in webpack.config.js, as follows:

module: {
        loaders: [
            {
               test: path.join(__dirname, 'public'),
               loader: ['babel-loader'],
               query: {
                 presets: debug ? ['react', 'es2015', 'react-hmre', 'stage-2'] : ['react', 'es2015', 'stage-2']
               }
            }
        ]
    }

I also tried installing babel-plugin-transform-object-rest-spread and adding to .babelrc:

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

Still receiving the same error.

Any help appreciated!

Upvotes: 3

Views: 1799

Answers (2)

CodeXP
CodeXP

Reputation: 162

I have a similar issue with a Vue project.

I have added:

{
  "presets": [
    ["es2015", {"modules": false}],
    ["stage-2"]
  ],
  "plugins": ["transform-object-rest-spread"]
}

in .babelrc and tried many things, but nothing seems to work.

As mentioned in preset-env plugin in caveats section, you should have at least v6.19.0, mine is v6.23.0 and it still doesn't work.

EDIT: I've found the Answer here.

MY SOLUTION

/*
 * additional javascript loader for es6 code in node_modules that have to be transpiled also
 */
{
    test: /\.jsx?$/,
    include: [
        NODE_MODULES + '/vuetify/src'
    ],
    use: [
        {
            loader: 'babel-loader',
            options: Config.babel()
        }
    ]
}

Upvotes: 2

Paulos3000
Paulos3000

Reputation: 3545

Call {...store.getState()} instead of todos={...store.getState()}

Upvotes: 0

Related Questions