Uglify error on build

[ream]

Uglify error on build

[egoist]

Before babel-loader officially merges that PR, we use a fork of it for now. So this should be fixed in v1.0.0-beta.5 ream/ream@c2c5861

[cannap]

i think the problem is here

export default { router } in index.js
try
export default { router:router } this is because uglifyjs i had this all the time in other projects

[jazoom]

@cannap, I'm sure you're right that we could hack around this issue but there are a few important points to consider:

1. It's not sensible to force every app to change its syntax just to get minification.

2. I've been using Uglify for years (including on my current project that now has this issue with Ream) without this problem appearing, which means there's something we can change in how Ream is set up.

3. The project I linked is the official custom server example (with some modifications so it actually runs). It's not good when the basic examples throw errors.

4. Why is Uglify even seeing this syntax? Shouldn't Babel have transpiled that away?

[cannap]

1. yea sure

2. me2

3. dont know

4. sure i had the same with the official vuejs webpack template... on DEV everything worked fine as i go in production this was the same problem as you have

[egoist]

This is a bug I guess babel/babel-loader#433

[jazoom]

That was fast. Great work by you and the babel-loader team.

[jazoom]

Actually, this seems to have only fixed some of the errors. Uglify still gets errors and only some files are minified. :-(

[jazoom]

I tried to get a trimmed-down build but it doesn't seem to follow a specific pattern of what fails (i.e. I can't isolate a specific bit of code that does it alone). It just seems to have an issue with ES2015 generally.

[jazoom]

Is there a way to prevent the built-in ream uglification? I have read through the webpack-chain docs and the ream docs and some of the ream source code. I tried using .init(), .tap(), and just .plugin() alone, as well as .delete() but I couldn't make ream's build process not attempt minification through ream.config.js.

I want to have a go at adding minification myself to see if I can get it working.

[egoist]

Check out https://github.com/ream/ream/blob/dev/lib/create-config.js#L222

config.plugins.delete('uglify')

[jazoom]

Yes, that's the part of your source code I was reading.

I found the webpack-chain docs to be extensive but not very clear. I had tried config.plugin('uglify').delete() which didn't work.

I just tried what you suggested and that also didn't work. Uglify still ran. I also tried config.plugin.delete('uglify') (singular) and that didn't work.

Here is that part of my config:

extendWebpack(config, { type, dev }) {

    // use DefinePlugin to inject constants
    config
      .plugin('define')
      .use(webpack.DefinePlugin, [{
        '__VERSION__': `'${packageSpec.version}'`,
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
        'process.env.VUE_ENV': '"client"'
      }]);

    config.plugins.delete('uglify');

}

The define plugin works fine.

[egoist]

Hmm, I guess you need to put shared config in ream.config.js and run npm run build since you're using the ream build command

[jazoom]

The problem was that even though my server called it like this:

const reamConfig = require('./server/ream.config.js');
const reamApp = ream(Object.assign({ dev: process.env.NODE_ENV === 'development' }, reamConfig));

ream wasn't happy until I put ream.config.js in the root directory. I'm not sure why this is. Everything else seemed to work fine when it was in the other directory.

[jazoom]

Well, I just confirmed that ES2015 was causing UglifyJS to choke.

I fixed the problem by installing uglifyjs-webpack-plugin (to control which version of UglifyJS is used) and installing the harmony version of UglifyJS with this command:

$ yarn add git://github.com/mishoo/UglifyJS2#harmony --dev

All the errors disappeared.

I'm not sure why babel isn't doing its job of minifying. Or perhaps, babel is leaving the ES2015 that browsers can handle but UglifyJS isn't able to handle it?

I'm not sure if you want to make this change to ream's core.

More info here: https://github.com/webpack-contrib/uglifyjs-webpack-plugin

[egoist]

Of course it's caused by ES2015 code since uglifyjs can't parse ES2015 code, the problem is why the ES2015 code isn't compiled down to ES5. Because we're using babel-preset-vue-app, everything should be compiled to be ie9-compatible.

By default the ream cli reads config file from $cwd, but you can use --config [path/to/ream.config.js] option.

[jazoom]

You're right, the server.js file never gets called so the build command needs to locate ream.config.js independently. I realised that after I posted the last comment.

I don't know why it's not being compiled down, but at least I've got my project back to a usable/deployable state with the workaround.

[egoist]

Yeah, since your custom server is using the API while the build command is from the CLI.

[jazoom]

And at least now we're certain that these build bugs are caused purely by ES2015 incompatibility.

[egoist]

@jazoom well how to reproduce that?

[jazoom]

I couldn't. Even when I took the offending code from my complex app and put it in a stripped-down ream project the errors were not reproduced. That's what I meant before when I said it doesn't seem to follow a specific pattern.

[jazoom]

This is so weird. I'm no longer getting the UglifyJS errors (I switched back to default so I could find the root cause), but I can see in the built files that some ES2015 isn't getting transpiled. I can find spread operators, for example.

Again, when I put that same code into a minimal app, it transpiles fine.

[jazoom]

Ugh... I just deleted node_modules and rebuilt it and it seems to work okay. I'm pretty sure I did that already at least once. Anyway... I'm glad it's gone.