missing files foundation.core.utils.js and foundation.core.plugin.js in dist/js/plugins

[Lemmork]

I'm using foundation-sites 6.5.1 and use requirejs to load only nessesary foundation JS files.
When I try to require foundation.accordion.js from the dist/js/plugins folder, the loader requires foundation.core.utils.js and foundation.core.plugin.js, which do not exist.

Could you please provide these files in next release

[ncoden]

Hi @Lemmork,

Please use the template we provide when submitting an issue: https://github.com/zurb/foundation-sites/issues/new?template=1-bug-report.md

I don't know how you installed or updated Foundation. NPM ? Foundation CLI ? Customizer ? CDN ?

All this aside, I am sorry, I forgot to say in the release notes that 2 files has been renamed:

• foundation.plugin.js -> foundation.core.plugin.js
• foundation.utils.core.js -> foundation.core.plugin.js

Please give more informations about your installation and follow the template we provide so we can know if this issue could affect others people and how to resolve it.

[Lemmork]

Hi @ncoden ,

sorry for writing only a short description. I will try again:
I installed foundation via NPM.

What should happen?

If I define a js-file for requireJs and require e.g. dist/js/plugin/foundation.accordion.js, requireJs should resolve the dependencies defined in dist/js/plugin/foundation.accordion.js.

What happens instead?

The requirements for dist/js/plugin/foundation.core.utils.js and dist/js/plugin/foundation.core.plugin.js could not be resolved, because these files do not exist.

Possible Solution

Provide dist/js/plugin/foundation.core.utils.js and dist/js/plugin/foundation.core.plugin.js files

I want to include only the JS-Plugins I really need, not the whole foundation JS:
define(['foundation.accordion'], function() { // Do something with the accordion... });

[ncoden]

foundation.core.plugin.js and foundation.core.utils.js are embedded in foundation.core.js, and our build process make our plugins looking for the imported properties in foundation.core.js instead of the original file.

So the issue is not that these files are missing from the dist folder, but that you import and build Foundation in a way that make the loader looking for imported properties in the original source files.

At first, please check that you imported the foundation.core.js file correctly.

Then, Could you precisely describe:

• What is your build process, if any (gulp? webpack?)
• Is there any transpilation (babel ?)
• Please provide your configuration files of pieces of code if they are relevant (how you build and import Foundation).

Thank you.

[Lemmork]

Hi @ncoden

perhaps I'm on the wrong track.

I love the foundation framework, because I can use only the parts I need and keep my project really small. My project is build upon a cms and what I want to achieve is that only the javasript is loaded which are needed by the components on a specific page.

Before Version 6.5.1 I used the JS-files in need from node_modules/foundation-sites/dist/js/plugins and did a merge and transpilation (babel) with gulp to a new merged js-File, which was included by my project. Its a similar approach to the way described here: https://foundation.zurb.com/sites/docs/javascript.html#import-in-html

As I read, that 6.5.1 supports requireJS (https://foundation.zurb.com/sites/docs/javascript.html#import-in-javascript) I tried to copy all jsFiles I need from node_modules/foundation-sites/dist/js/plugins without any merging or transpitation to my project-js-directory and use requireJS to resolve the dependencies.

Therfore requireJS tries to find the js-Files, which are defined in the file (eg: node_modules/foundation-sites/dist/js/plugins/foundation.accordion.js) loading fails if the files do not exist.
define(["./foundation.core", "./foundation.core.plugin", "./foundation.core.utils", "./foundation.util.keyboard", "jquery"], factory);
In this case foundation.core.plugin, foundation.core.utils would fail, because these files do not exist, because they are merged to foundation.core.

Maybe it is not intended, to load single js-packages with requireJS.

[ncoden]

Ok @Lemmork, now I understand the issue.

The generated plugin files in v6.5.1 still have the original source names ./foundation.core.plugin/./foundation.core.utils instead of the retargeted ./foundation.core.

define(["./foundation.core", "./foundation.core.plugin", "./foundation.core.utils", "./foundation.util.keyboard", "jquery"], factory);

There is something wrong with our bundling process. I'll investigate this.

[ncoden]

I found when the issue comes from.

Our webpack configuration for externals is not as it should be. The AMD and CJS entries should be the retargeted file.

Here is how it should be changed:

'./jquery': {
  root: 'jQuery',
  amd: './jquery',
  commonjs: './jquery',
  commonjs2: './jquery',
},
'./foundation.core.plugin': {
  root: 'foundation.core',
--  amd: './foundation.core.plugin',
++  amd: './foundation.core',
--  commonjs: './foundation.core.plugin',
++  commonjs: './foundation.core',
--  commonjs2: './foundation.core.plugin',
++  commonjs2: './foundation.core',
},
(...)

[DanielRuf]

Could we have seen / caught this with a simple single test? Just to make sure that every variant works in its simplest form.

[ncoden]

Could we have seen / caught this with a simple single test? Just to make sure that every variant works in its simplest form.

Yes. I tested the main file foundation.js but forgot the plugins. I'm working on this.

[ncoden]

Fixed by #11618.