Webpacker: Webpacker production setup to avoid UglifyJS problem with ES6

[HectorLS]

Hello, i know i know, this is an UglifyJS problem compiling ES6.

But how can i disable Uglify the files in webpacker for production. So at least i can deploy my application, even if this one is not compressed.

I just see options for Webpack but not for Webpacker.
So i need to ask because i'm tired of tries and failures for just compile my application with capistrano.

.babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": "> 1%",
        "uglify": false
      },
      "useBuiltIns": true
    }],
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

That uglify option do nothing, so i have guessed we have to work in the /config/webpacker/production.jsfile

Now i pray 🙏 📿 to the gods that post here a solution for everybody about

how to setup Webpacker^3 for production to be able to compile es6 javascript and if its possible to compressed those files. 🥇 🛐

Thanks in advance

[adriacarro]

Hi,

I have the same error with webpacker 3.2.1. I've found some fixes using babili but I couldn't find how to configure with all the environment.

Please, I need your help.

[gauravtiwari]

@HectorLS @adriacarro Webpacker 3.2.1 support es6+ code out of the box. Have you upgraded both gem and npm package to 3.2.1? https://github.com/rails/webpacker/blob/master/package/environments/production.js#L18

bundle update webpacker
yarn add @rails/webpacker

[HectorLS]

Hello @gauravtiwari

I have

Bundler 1.16.1
Webpacker 3.2.1

And as i said, i can compile successfully for development, its only a production problem by the uglify 😕

[gauravtiwari]

Ahh right and sorry don't mind me asking again - is npm package updated as well in package.json to 3.2.1?

[TheRusskiy]

I too had problems with uglifyjs in prod build.
Webpack depends on ^0.4.6 out of the box and it seems to have issues. Upgrading it and using it manually did it for me.
That's how I solved it:
Add "uglifyjs-webpack-plugin": "^1.1.6", to package.json
Add the following to production.js

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

[gauravtiwari]

@TheRusskiy We ship this by default in 3.2.1

[TheRusskiy]

@gauravtiwari oopsie, sorry, for some reason I thought I had 3.2.1 installed, but it was 3.2.0

[timrogers]

I hit some problems with this today - sounds like my configuration is behind what @gauravtiwari says is shipped in v3.2.1.

Do you guys have any ideas for a good procedure for people people's configs up to date with the latest and greatest? I suspect that'd be a useful feature given that most people are likely not to customise their config very much.

[gauravtiwari]

@timrogers All you have to do is upgrade gem and npm package to the latest version since the configs are included inside the npm package there is no need to do anything else.

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

yarn upgrade @rails/webpacker --latest
bundle update webpacker

[timrogers]

That didn't work for me. I seem to have a local copy of production.js (which came when I installed Webpacker, I think?).

[gauravtiwari]

Ahh I see, we have moved all those files to npm package now so no need for them if you are using 3.x+

Please see: https://github.com/rails/webpacker/blob/master/CHANGELOG.md#breaking-changes-2

[HectorLS]

I finally solved using this setup in the .babelrc
and ofc being sure that the package installed is the Webpacker 3.2.1

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["last 2 versions"]
      },
      "useBuiltIns": true
    }],
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-object-rest-spread",
    ["transform-class-properties", { "spec": true }]
  ]
}

stage-2 need to have the babel-preset-stage-2 package installed in devDependencies

[valterbarros]

@TheRusskiy Man you save my life after 5 days searching for the solution