Foundation-sites: Error building with WebPack

[sn0rcha]

How to reproduce this bug:

1. type npm run build

What should happen:

Build file for production

What happened instead:

Displays an error:
ERROR in static/js/vendor.752b0ac1e9cb80c50795.js from UglifyJs
Unexpected character '`' [./~/foundation-sites/js/foundation.util.core.js:24,0][

Anyone else had this - Use to compile foundation 5 no probs.

Cheers,
Ben

[relwiwa]

I also run into this error message, when running webpack -p:
ERROR in bundle.9ee204eb21bbc5e1172c.js from UglifyJs
Unexpected character '`' [bundle.9ee204eb21bbc5e1172c.js:10400,124]

There is an ES6 template literal at this line of code:
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1) + (namespace ? `-${namespace}` : '');

I don't understand why the template literal is still there as it should have been transpiled via Babel Loader. I'm using the es2015 preset .

Is this an issue with Foundation 6.4 or Babel-Loader? I never had this problem before with Babel Loader.

[relwiwa]

So I figured out what was going on:

Foundation files aren't transpiled to ES5, according to its documentation:

"Our JavaScript uses some features of ECMAScript 2015. If you use Foundation with a build system, you'll need to compile our code to ES5. We use Babel in our templates to do this. Babel has plugins for every build system imaginable, so integrating it into an existing setup is easy."

I had excluded the node_modules folder for babel-loader, so Babel did not transcompile the Foundation files.

It now works, after changing the config from exclude to include like this:
rules: [{
test: /.js$/,
use: 'babel-loader',
include: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules/foundation-sites')
]},

It would be great if there was an ES5 version included in the NPM package.

[kball]

There are ES5 versions included in the dist folder, with no module environment but rather bundled for the browser... does that match your needs?

[sn0rcha]

I managed to get around this by including the foundation js folder in my babel-loader config, works like a charm now ;)

[relwiwa]

The dist versions wouldn't help, as I'm really happy about Foundation's support of ES6 modules and also managed to make it work.

I was wondering what the reason behind distributing the modules with ES6 and not ES5 syntax is. I never ran into this issue with Babel Loader/UglifyJS before. So I assume that all the other NPM modules are (still) transpiled to ES5 before being distributed.

[kball]

@relwiwa that decision predates my involvement with the project.. @gakimball do you have more of the backstory there?

[gakimball]

@relwiwa @kball Honestly, we just didn't fully understand how tools like Babel, Webpack, etc. all fit together when we shipped that code. Most Webpack configs ignore node_modules assuming that all dependency code is already ES5 (and because compiling all your dependencies would take forever).

In our Gulp-based build process, which had a more old-school way of manually compiling + concatenating files, this kinda worked. But it definitely doesn't make sense anymore in the context of how people bundle JavaScript these days.

[kball]

Seems like we should potentially add a module wrapper around the distfiles - I've seen that done such that if you're in a browser environment they apply globally and outside create exportable modules. The one potential hangup is adding them to the global Foundation object in the browser env for backwards compatibility, but I think we should be able to make that work.

@relwiwa would you be interested in helping make this happen?

[relwiwa]

@kball Sure, I can give it a try, but I will have to explore Foundation's build process and NPM package further. Currently on a few days off with just my mobile around, will do when I'm back

[domstubbs]

If anyone else is struggling as I was with a default Webpack config which excludes node_modules, I’ve posted my working Laravel Mix config here.

This is the first project I’ve attempted with Webpack and I’ve ended up losing a lot of time just trying to get production builds to complete successfully. Although I’ve probably picked up some useful knowledge, including ES5 modules out of the box seems like it would save a lot of headaches and would definitely get my vote - especially if that is the most common way of doing things.

[DanielRuf]

We will move to a full webpack build in the near future (with uglify-es, babelify, babel, preset-env and so on).

Is this still relevant here?

Make sure to always include all files which have to be transpiled to ES5.

[ncoden]

@DanielRuf Foundation was not transpiled to ES5. This is now resolved with https://github.com/zurb/foundation-sites/pull/10864 and https://github.com/zurb/foundation-sites/pull/10930

[nolafs]

This is not resolved, I am still getting the error with the latest version of Foundation.

ERROR in main.d64ba.js from UglifyJs
Unexpected character '`' [./node_modules/foundation-sites/js/foundation.core.utils.js:24,0][main.d64ba.js:2

[DanielRuf]

@nolafs please provide a small reproducible testcase (codepen) and open a new issue with all relevant details.

[nolafs]

Actually I fixes it.

Instead of

import Foundation from 'foundation-sites/dist/js/foundation';

I had to import it from the dist folder

import Foundation from 'foundation-sites/dist/js/foundation';
import 'foundation-sites/dist/js/plugins/foundation.core';

Thanks