foundation-sites: Error building with WebPack

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.

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.

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