Webpack build fails with es6 react.js

Question

I use React.js, Webpack, ...props syntax, arrow functions.

When I run "npm run build", I get this error:

ERROR in bundle.js from UglifyJs SyntaxError: Unexpected token punc «(», expected punc «:» [bundle.js:77854,15]

Here is my debug.log

My webpack.config

How to run build successfully?

---

I found the line which causes the bug, here it is:

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

I don't know why. :(

Without it, all my ES6 syntax works and compiled without any errors.

Any Help please

Answer 1

In bundle.js, line 77854, character 15, there is a parenthese after a object properties name, instead of a :. There must be something like :

{property () {}} 

instead of

{property : function () {}} 

Edit (thanks to @handoncloud): The first is valid ES6, and is a shorthand for the second, that is the equivalent in ES5.

The problem is, that the build does not fully support ES6.

Answer 2

Found it.

React-Bootstrap-Table have a dependency named React-Modal.

I installed React Modal by npm install react-modal without --save or --save-dev. So React-Modal wasn't not listed in my package.json.

Now everything is ok.

SOLUTION : npm install react-modal --save

Answer 3

This error happens if you use have an npm dependency that has ES6 syntax. It happended to me, too, with Preact (see https://github.com/developit/preact-compat/issues/155).

You can fix it by adding the dependency explicitly to the modules that are loaded through babel, like so:

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
                srcPath,
                // we need to include preact-compat
                // otherwise uglify will fail
                // @see https://github.com/developit/preact-compat/issues/155
                path.resolve(__dirname, '../../../node_modules/preact-compat/src')
            ]
        }
    ]
}