Webpack Build Issue

[DinakaranS]

Hi I am getting following issue while building webpack

ERROR in bundle.js from UglifyJs Unexpected token: name (key) [./node_modules/chartkick/src/helpers.js:15,0][bundle.js:257776,6]

Thanks Dinakaran S

[ankane]

Hey @DinakaranS, can you give more detail on your setup? Things like:

1. The versions of chartkick and react-chartkick you're on
2. The full backtrace
3. Code to reproduce

[DinakaranS]

Hi ankane, I am using "webpack" version 3.4.1, "webpack-dev-server" version 2.4.5, "chartkick" version 2.3.3 and "react-chartkick" version 0.1.6

In my .babelrc i use {"presets": ["react", "es2015", "stage-1"]}

Webpack configuration will be like

const JS_REGEX = /.js$|.jsx$|.es6$|.babel$/; const webpack = require('webpack');

module.exports = { devtool: 'source-map', entry: ['babel-polyfill', './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [ {test: /.json$/, loader: 'json-loader'}, {test: JS_REGEX, exclude: /node_modules/, loader: 'babel-loader'}, { test: /.scss$/, exclude: /node_modules/, loaders: ["style-loader", "css-loader?sourceMap!sass-loader?sourceMap"] }, { test: /.(jpe?g|png|gif|svg)$/i, loaders: [ 'file?hash=sha512&digest=hex&name=[hash].[ext]', 'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false' ] }, ], }, resolve: { extensions: ['*', '.js', '.jsx'] }, node: { console: true, fs: 'empty', net: 'empty', tls: 'empty', dns: 'empty' }, plugins: [ new webpack.optimize.ModuleConcatenationPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin(), new webpack.IgnorePlugin(/^.\/locale$/, /moment$/), new webpack.DefinePlugin({ 'process.env': { // This has effect on the react lib size 'NODE_ENV': JSON.stringify('production'), } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true }) ], devServer: { historyApiFallback: true, contentBase: './' } };

[ankane]

Thanks @DinakaranS. Unfortunately, I don't know off the top of my head and don't have the bandwidth to dig in. Here's a similar issue that might have the answer: https://github.com/joeeames/WebpackFundamentalsCourse/issues/3

I'll leave this open in case someone else has an idea. Please update the issue if you find anything or figure it out, so others having the same issue can benefit.

[timrogers]

I'm hitting this. I've tried installing the latest uglifyjs-webpack-plugin which seems to be the most common solution, but it's still not happy.

[jaylocke]

I had the same problem. How to do solve that?

[timrogers]

After a bit more playing about, I did manage to fix this with uglifyjs-webpack-plugin.

My Webpacker installation has placed some Webpack configuration files in config/webpack, e.g. config/webpack/production.js. In there, I've got a bunch of configuration which came with Webpacker - and I think I may well have made some customisations too.

Newer versions of Webpacker seem to work differently, having a Webpack configuration "built-in" which is imported and not "copied" into your project. It puts this file into your project in config/webpack which imports this one from the Webpacker Yarn package.

The new built-in configuration has Uglify configured correctly so that ES6 (like Chartkick) compiles, whereas the old one doesn't. This explains why this would work for some people.

I set up Webpacker on an older version, and I seem to have my own totally different config file

The solution for me was to install uglifyjs-webpack-plugin using Yarn, and then edit my config/webpack/production.js to use it rather than the earlier Uglify version built into Webpack. It'll look roughly like this:

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin({ sourceMap: true })
  ]
}

I'm going to look into deleting my custom Webpack configuration and importing Webpacker's one, as that'll probably be simpler and more sustainable.

[timrogers]

The underlying change to Webpacker is mentioned here - it's not terribly easy to understand the impact from reading it though!

[wpp]

Thanks so much for sharing your work-around @timrogers! I had the same issue and resolved it with the fallback to the uglifyjs-webpack-plugin too.

[ankane]

Just pushed a new version that uses the module option in package.json, which may fix it. Let me know.

[wpp]

0.2.0 seems to work for me. Thanks

[ankane]

Great to hear