Menu icon Foundation
How to Add NPM package JS file to Foundation 6.4

Hi,

I have a new Foundation 6.4 Zurb template site installed through the CLI and Im struggling to add the js resources of an additional NPM package.

On the previous version of 6.3 I added a line in the config.yml file

  javascript:

 

 

    # Paths to your own project code are here

    - "node_modules/npm-package/dist/npm-package.min.js"

 

How and where do I add additional JS files from NPM packages?

 

webpackfoundation 6.4javascript

Hi,

I have a new Foundation 6.4 Zurb template site installed through the CLI and Im struggling to add the js resources of an additional NPM package.

On the previous version of 6.3 I added a line in the config.yml file

  javascript:

 

 

    # Paths to your own project code are here

    - "node_modules/npm-package/dist/npm-package.min.js"

 

How and where do I add additional JS files from NPM packages?

 

Rafi Benkual 18 days ago

Foundation now uses module bundlers.

So to add a new package - let's look at this example: 

lets add https://limonte.github.io/sweetalert2/ to our project:

 

3. npm install sweetalert2

 

4. create a new file lib/dependencies.js (this is where we will load our dependencies)

 

 

lib/dependencies.js Content:

// custom dependencies

import swal from 'sweetalert2';

 

const deps = {

  swal: swal

};

 

module.exports = deps;

 

5. Add to app.js:

import libs from './lib/dependencies';

 

window.libs = libs;

 

This keeps you from polluting the window object.

 

6. add the following line to config.yml under PATHS and then sass:

- "node_modules/sweetalert2/src"

 

7. This allows you to load the sass from this directory in your app.scss:

@import 'sweetalert2';

 

8. Now add this to your app.js:

 

libs.swal({

  title: 'Error!',

  text: 'Do you want to continue',

  type: 'error',

  confirmButtonText: 'Cool'

});

 

Rabi Hernandez 17 days ago

I've migrated a project from 6.3 to 6.4, using aos.js, that was working fine. After installed AOS via NPM, I created a new dependencies.js with the code

import AOS from 'aos';
const deps = {
  AOS: AOS
};

module.exports = deps;

then, in my app.js 

import libs from './lib/dependencies';
window.libs = libs;


$(document).foundation();

libs.AOS.init({
	duration: 600
});

But AOS is not working. what I made wrong? 

Rabi Hernandez 17 days ago

Sorry, was my fault: I forget to include the scss.

The method works like a charm.

Ali Hellani 16 days ago

This only works if the module has an export feature.

i want to import jquery slidebars which doesn't have export object but it doesn't work (it keeps telling me slidebars is not defined). https://www.adchsm.com/slidebars/downloads

and there are lots of jquery libraries that have the same issue.

 

how should i solve this problem ? should i downgrade to a previous version (no Webpack) ?

Petr Ogurcak 13 days ago

I have the same issue.. 

- I installed for example nette.ajax.js via yarn

- added it to config.yml

  entries:
    - "node_modules/nette.ajax.js/nette.ajax.js"

- created assets/js/lib/dependencies.js

// custom dependencies
import nette_ajax from 'nette.ajax.js';

const deps = {

  nette_ajax: nette_ajax

};

module.exports = deps;

 

- added this piece of code to app.js

import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;

//import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';

import libs from './lib/dependencies';

window.libs = libs;

$(document).foundation();

 

and I run into this issue

jQuery is missing, load it please

 

Why is it happening? What's wrong? Is there any tutorial how to do that?

KSP 6 days ago

I also struggled to get this to work, and gave up in the end.

I'm not familiar with Webpack and module bundling, so I'm sure that doesn't help, but trying to read the provided links and anything else I could come over, I can't for the life of me figure out how to set this up correctly.

The custom javascript I'm trying to include (as a custom.js living alongside app.js in the src folder) is not a "module" per se, it's stuff like initializing Slick sliders, and adding some custom event handlers to Foundation plugins like Reveal and Tabs.

Where (or how) would I best add code like this? Directly in app.js? (I tried, but it didn't seem to work) Make it into modules? If so, how? I would like to keep all bundled into one JS file on build to minimize requests.

I had to roll back to 6.3 in the meantime. Hopefully some easier guides will appear soon. I realise it may be my lack of skills, but from never having worked this way before, I've so far managed to learn NPM and Bower through the provided guides, but here I'm utterly lost.

I simply cannot understand how Webpack works, and what changes needs to be done to move from the recommended setup for 6.3 to 6.4. A step-by-step for relative dummies would be incredibly helpful. It seems I'm not the only one struggling with this.