Webpack build fails with es6 react.js

691
March 06, 2017, at 6:10 PM

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

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

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 3

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

Rent Charter Buses Company
READ ALSO
Requiring modules in modules in Electron

Requiring modules in modules in Electron

I'm making an Electron-based game and I've run into a problem of Node not being able to compile my custom modulesMost frustratingly, this seems to be occuring after what I thought was a simple change in code

346
node express: should you always call next() in a get or post handler?

node express: should you always call next() in a get or post handler?

Until now I've defined my get and post handlers with just (req, res) as arguments, with the assumption being that I put these handlers last in the chain of middleware, and make sure that I handle any responses and error handling properly within these handlers

425
Error NPM start on ReactJS

Error NPM start on ReactJS

I have problem about start npm (ReactJS)

494
Run a CRON job that depends on entries of a database in NodeJS using AWS

Run a CRON job that depends on entries of a database in NodeJS using AWS

I want to make schedules that depend on entries of a database to schedule cron jobsLike if there's an entry in database with a timestamp 2:00 PM, 3rd of Apr, I want to send a mail to users on 2nd of Apr

316