Phoenix 1.4 (rc.2) with Brunch - phoenix.js is not transpiled

I’m updating app from Phoenix 1.3 to Phoenix 1.4 (rc.2). Everything went smooth with exception of assets compilation.

At 1.3, we actually been still using Brunch. It’s working well and the problems appear only on update to Phoenix 1.4.

The main issue I am facing is that phoenix.js file, that is being loaded using package.json from ../deps/node_modules/phoenix, is now compiled but keeps using ES6 syntax. For example, it’s using “const something” instead of “var something”. If you open this file https://github.com/phoenixframework/phoenix/blob/93ad4c2932a8cd2c28095c8c82d1966729c7bc76/priv/static/phoenix.js and search for "const " you’ll see what I mean.

This was not the case before, as you can see with 1.3 version of phoenix.js file here: https://github.com/phoenixframework/phoenix/blob/v1.3.4/priv/static/phoenix.js

The file is now also minified, which is redundant as I am running uglifier anyway on the resulting app.js, or - rather - I would like to run uglifier on the app.js file but it crashes precisely because of it containing ES6 syntax now.

I am terrible at the JavaScript build tools to be fair, so figured I may as well ask - is there a way to use Phoenix 1.4 with Brunch, or am I basically forced to upgrade to webpack?

1 Like

On slack there has also been some discussion around that from someone using phoenix.js by directly linking to it in his html, which also doesn’t work well depending on the browser. I’m not sure, but wasn’t there a way to include both and via the package.json declare which file is ES5 and which is a ES6 source file? I’ve seen lot’s of examples even for webpack, which don’t compile anything in node_modules to save on compile time.

1 Like

As ignorant as I am, all the other libraries we are using are already transpiled, and brunch does not have to compile them. phoenix.js seems odd here :confused:

(Haven’t tried 1.4 yet).

Short answer: Yes. (Longer answer: If you really want to get into the weeds with Brunch there likely is a path through it. Maybe just act as if “phoenix.js” is one of your not-precompiled JS files and have it push it through Babel)

I suspect the underlying issue is the Babel presets being used to generate phoenix.js. More recent “default” Babel configurations aren’t sticking strictly to ES5 (unnecessarily slow) but are in fact moving towards “the part of ES2015 as it is supported by most browsers”.

When Babel can’t find a browserslist somewhere it assumes:

> 0.5%, last 2 versions, Firefox ESR, not dead .

Included browsers e.g. IE11 but not below.

2 Likes

I think you are right. The core of my problem is that Uglify-JS 3.x does not support “const” syntax. And this syntax is supported by majority of browsers already, so it makes sense to compile it this way.

So, my issue seems not to be related at all to brunch, which in fact works, but uglify-js-brunch.

When uglify-js-brunch is being removed, project compiles properly. Now I just need to find a replacement for it because 6MB app.js file is not something I really want :smiley:

1 Like

I ended up replacing uglify-js with terser which is a maintained fork, supporting ES6: https://www.npmjs.com/package/terser

The compiled phoenix.js bundle is supposed to be es5. We switched internally to webpack for building phoenix.js, and I assumed it would be es5 output, but JS is never that easy. I’ll take a look and see what we can do. The upgrade to webpack is purely user choice and shouldn’t be required. If brunch is working for you then by all means you should stay on it :slight_smile:

8 Likes

Ha, so I found a bug.

1 Like

Not necessarily. I’m sure Chris is strongly motivated to not to cause any undue effort for pre-1.4 adopters but … essentially using Brunch with 1.4 (and above) is a similar position to using pre-1.4 Phoenix with anything but Brunch. The default JS tools aren’t really a core concern of Phoenix - they are merely supplied as a convenience.

If this is a Babel issue one has to remember that Babel does not target language specifications but rather feature sets as they are provided by various browsers and Node. UMD modules are starting to fall out of favour and the code therein is largely becoming ES2015.

How to write and build JS libraries in 2018

It’s basically becoming more and more difficult to pre-compile all the various permutations that people may want, so transpiling of vendor code may become a user responsibility again.

So when you are finally ready to leave Brunch behind you may not want to blindly adopt webpack 4 but spend some time to find something that suits you - because more than likely you’ll be spending some significant time with it.

It was just a simple misconfiguration. I’ve addressed it here: https://github.com/phoenixframework/phoenix/pull/3126

You can pull in Phoenix master for a working build.

4 Likes

I think phoenix.js is still pretty simple and bare bones. So, ideally, you could just copy it over and load without any transpiler, compiler or bundler and it could work for you. And this is fine, I have done that recently with simple admin panel and it is great. I think if we do not have to, we should not throw away possibility to support these simple use cases.

1 Like

At this time phoenix.js contains the export keyword. Browser support for modules via the script tag seems ok - but they now seemed to have settled on the .mjs extension (to leave .js for the non-module fallback).

My suspicion is that JavaScript modules were at least a partial motivator for adopting Brunch (and possibly to move from bower to npm for package management) in the first place.