CODEWITHSUNDEEP
javascriptnode.jsreactjsnpmwebpack
Steffi
Steffi

Reputation: 7057

Webpack build fails with es6 react.js

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

enter image description here

My webpack.config

enter image description here

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

Upvotes: 0

Views: 975

Answers (3)

Steffi
Steffi

Reputation: 7057

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

Upvotes: 0

Patrick Hund
Patrick Hund

Reputation: 20236

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

Upvotes: 1

Lorenz Meyer
Lorenz Meyer

Reputation: 19895

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.

Upvotes: 0

Related Questions