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

If you're trying to compress the bundle output file with UglifyJS2 it might be that it doesn't support ES6... — user5066707
– user5066707, Commented Mar 5, 2017 at 12:21
You could compress it manually with jscompress.com though (it looks like this compressor is using an ES6 compressor individually; check the ECMAScript 2016 (experimental) option) — user5066707
– user5066707, Commented Mar 5, 2017 at 12:23
Also, are you minifying the bundle with babel ? I never used it :v, but it probably supports ES6 and there are some related questions — user5066707
– user5066707, Commented Mar 5, 2017 at 12:26
I'm a newbie of Webpack. I don't really understand this. I followed a tutorial, did some react and now I try to build but doesnt work. BUT the --watch command to compile DEV bundle work great. — Steffi
– Steffi, Commented Mar 5, 2017 at 12:32

Patrick Hund · Accepted Answer · 2017-03-05 13:23:49Z

1

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')
            ]
        }
    ]
}

answered Mar 5, 2017 at 13:23

Patrick Hund

20.4k12 gold badges71 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Steffi Over a year ago

Oh! Yeah, okay! It looks good but In my case what is the dependency which needs to be add in the include ?

user5066707 Over a year ago

@Steffi babel-loader

Patrick Hund Over a year ago

no, babel-loader is not included in the bundle. Look in the package.json files of your dependencies, if they have a property "jsnext:main", you need to explicitly run them through babel for Uglify to work

Patrick Hund Over a year ago

@handoncloud I'm not blind, the babel-loader is in the webpack config, but it is not included in the bundle. I'm talking about configuring the babel-loader explicitly to include a package from node_modules that has the jsnext:main property. Currently, Steffi is only running her own source code through the babel-loader

Patrick Hund Over a year ago

Find out which module you have to include to be loaded through babel-loader. Check each dependency's package.json, see if it has a property jsnext:main

Lorenz Meyer · Accepted Answer · 2017-03-05 12:50:02Z

0

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.

edited Mar 5, 2017 at 12:50

answered Mar 5, 2017 at 12:31

Lorenz Meyer

20.1k23 gold badges83 silver badges129 bronze badges

12 Comments

Steffi Over a year ago

Found it. I think it from the plugin React-Modal : i.imgur.com/uXYeBNr.png (bundle.js) — i.imgur.com/kvXZLw6.png (react-modal.js) But how to solve that ? It's not my code. I just compile it with webpack...

user5066707 Over a year ago

{property() {} } is something valid in ES6, just fyi (inside an object expression, not block statement). It's a shorthand method

user5066707 Over a year ago

@Steffi Are you talking about removePotal ? Maybe Babel is trying to compress that input as ES5 or below. This is totally valid in ES5 yes.

user5066707 Over a year ago

If ES6 isn't supported, then just define it with the regular function syntax.

Steffi Over a year ago

Thanks guys, I understand better so what is the solution?

|

Steffi · Accepted Answer · 2017-03-06 10:54:24Z

0

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

answered Mar 6, 2017 at 10:54

Steffi

7,12326 gold badges81 silver badges131 bronze badges

Collectives™ on Stack Overflow

Webpack build fails with es6 react.js

3 Answers 3

5 Comments

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related