Webpacker: Heroku deploy error related to Webpacker compile (specifically UglifyJS: unexpected token: punc (,))

[Ephs05msm]

Attempting to deploy to Heroku using webpacker. Read through #280 and followed instructions in #291. App in question is using Elm (i.e., rails new myapp --webpack=elm). After running git push heroku, the Webpacker compile error (from the Heroku remote) is:

remote: ERROR in hello_elm-19337190dd5fe89758f3.js from UglifyJs remote: Unexpected token: punc (,) [./node_modules/mathsteps/lib/node/index.js:11,0][hello_elm-19337190dd5fe89758f3.js:1870,9]

Environment:
Ubuntu 14.04.5 LTS
Node: 6.11.0
Yarn: 0.22
Rails: 5.1.2
Webpacker: 2.0
Uglifier: 3.2.0
Webpack: 3.3.0

package.json:

"dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.25.0",
    "babel-loader": "7.x",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.5.2",
    "coffee-loader": "^0.7.3",
    "coffee-script": "^1.12.6",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.28.4",
    "elm": "^0.18.0",
    "elm-webpack-loader": "^4.3.1",
    "extract-text-webpack-plugin": "^3.0",
    "file-loader": "^0.11.2",
    "glob": "^7.1.2",
    "js-yaml": "^3.8.4",
    "mathjs": "^3.14.2",
    "mathsteps": "Ephs05msm/mathsteps#mm_use_scope",
    "node-sass": "^4.5.3",
    "path-complete-extname": "^0.1.0",
    "postcss-loader": "^2.0.6",
    "postcss-smart-import": "^0.7.4",
    "precss": "^1.4.0",
    "rails-erb-loader": "^5.0.2",
    "resolve-url-loader": "^2.1.0",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.2.0",
    "webpack-manifest-plugin": "^1.1.0",
    "webpack-merge": "^4.1.0"
  },
  "devDependencies": {
    "elm-hot-loader": "^0.5.4",
    "webpack-dev-server": "^2.5.0"
  }

The content of the identified file, from the mathsteps repo, is below. This file is unchanged in the forked version I'm using, and the error persists when I use the mathsteps master branch:

const Creator = require('./Creator');
const CustomType = require('./CustomType');
const MixedNumber = require('./MixedNumber');
const NthRootTerm = require('./NthRootTerm');
const PolynomialTerm = require('./PolynomialTerm');
const Status = require('./Status');
const Term = require('./Term');
const Type = require('./Type');

module.exports = {
  Creator,
  CustomType,
  MixedNumber,
  NthRootTerm,
  PolynomialTerm,
  Status,
  Term,
  Type,
};

hello_elm.js calls mathsteps via import mathsteps from 'mathsteps'; (consistent with the default import for hello_elm.js: import Elm from './Main';) and uses it via let expressionSteps = mathsteps.simplifyExpression(inpBarEnt.expression);

webpack-dev-server runs fine locally.

I'll also post this issue at https://github.com/mishoo/UglifyJS2 and report a fix if one comes through.

Thanks in advance for any help you can provide.

[Ephs05msm]

Was able to resolve this by using the beta version of uglifyjs-webpack-plugin, which depends on uglify-es 3. Saw multiple suggestions in various places to use uglify-es, but it seems that the fix I needed was in version 3.0 while the webpack plugin is currently using 2.8.29. A maintainer over at UglifyJS2 was able to point me in the right direction. After a bunch of trial and error, this discussion helped me finally resolve.

Then, in production.js I made the following adjustments per the uglify-webpack-plugin instructions:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
...
plugins: [
    new UglifyJSPlugin(),          // Replaced the reference to webpack.optimize.UglifyJsPlugin

    new CompressionPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: /\.(js|css|html|json|ico|svg|eot|otf|ttf)$/
    })
  ]

Hope this is helpful to others experiencing this issue.

[hovancik]

Any idea how "update" uglifyjs-webpack-plugin with webpacker 3.0.2? I'm not seeing webpack.optimize.UglifyJsPlugin anywhere in my project.

[gauravtiwari]

@hovancik You can delete the default uglify plugin and add this one like so: https://github.com/rails/webpacker/blob/master/docs/webpack.md#loaders

https://github.com/rails/webpacker/blob/master/package/environments/production.js#L11

// production.js
environment.plugins.delete('UglifyJs')
environment.plugins.set('UglifyJs', /* new plugin */)

[bborn]

For others with the same problem, I had to install the latest uglify-webpack-plugin:

$ yarn add uglifyjs-webpack-plugin@beta

And then do this in production.js:

const UglifyJSPlugin = require("uglifyjs-webpack-plugin");
environment.plugins.delete("UglifyJs");
environment.plugins.set("UglifyJs", new UglifyJSPlugin());

I'm new to webpack, so I'm not sure this is the right way to do things, but it allowed me to precompile on Heroku, combining sprockets assets and my webpack components.

[thadeu]

@bborn Thanks, I had same problem, solved for me as well.