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 2 months 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 2 months 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 2 months ago

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

The method works like a charm.

Ali Hellani 2 months 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 2 months 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 about 2 months 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.

Vaughn D. Taylor about 2 months ago

@KSP, if it makes you feel any better, I'm completely in the dark with how to get Foundation 6.4 working. What I've learned is that there are several installation guides -- none of which are the same:

http://foundation.zurb.com/sites/docs/installation.html
https://github.com/zurb/foundation-sites

The instructions on each do not address any of the questions I have which is how do I get an installation that is similar to 6.3.x where I can include pre-compiled JS files in my main app.js file. I'm using Codekit to assemble and compile my files, and 6.4.x seems to have broken my workflow all together.

Hopefully the folks at Foundation will come up with a definitive (and easy to understand) installation guide for users who do not want the basic install. Otherwise, I'm changing frameworks.

Frankly, I'm completely disgusted with this upgrade -- I've wasted countless hours trying to get it to work.

Bren about 2 months ago

For those of you using Webpack, this is what I did. Well, there is more than one way to do this. This is the old way I was doing it. In webpack.config.js:

// Make jQuery / $ global
// See: https://webpack.js.org/plugins/provide-plugin/
new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

This is optional, but helps make the imports a bit cleaner:

resolve: {
  alias: {
    'foundation.core': 'foundation-sites/js/foundation.core',
    // Other plugins. Each plugin requires what it needs.
    // 'foundation.reveal': 'foundation-sites/js/foundation.reveal',
    jquery: 'jquery/src/jquery'
  }
}

Then in your app:

import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// $ is global
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {                                                   
  $(document).foundation()
}

I cleaned up my Webpack config further by removing ProvidePlugin and doing this:

// If you omit the resolv.alias from above:
// import $ from 'jquery/src/jquery'
// import { Foundation } from 'foundation-sites/js/foundation.core'

import $ from 'jquery'
import { Foundation } from 'foundation.core'

// Adds foundation() function to jQuery.
// This was KEY for me getting 6.4 to work.
Foundation.addToJquery($)

$(document).ready(function () {                                                   
  $(document).foundation()
}

 

For those NOT using Webpack, I could probably set up a step by step guide / repo on Github if interested.

Jonathan Davies 25 days ago

I keep getting this problem with Owl Carousel 2.

Following Rafi tutorial everything goes in with out a problem and I can see everything in the app.js in the debugger and everything compiles correctly under 'foundation watch' command. However everything stops working.

For instance I'm using an off canvas but it no longer works.

 

Dependencies:
// custom dependencies
import Owl from 'owl.carousel';

const deps = {
	Owl: Owl
};

module.exports = deps;

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

libs.owl({
  title: 'Error!',
  text: 'Do you want to continue',
  type: 'error',
  confirmButtonText: 'Cool'
});

YML:
- "node_modules/owl.carousel/src/scss"

SVM 8 days ago

Does anyone have a progress update on this issue? I've ran into the same issue as Jonathan Davis. I'm able to import the Owl Carousel 2 plugin into my app.js file. However, there is an error `Cannot read property 'fn' of undefined` because Owl Carousel uses `$.fn.owlCarousel = function (option)` when adding next/prev elements, so this error causes all of Foundation scripts to stop functioning. How does this get resolved?

app.js:23544 Uncaught TypeError: Cannot read property 'fn' of undefined
    at app.js:23544
    at Object._typeof (app.js:23578)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:25520)
    at __webpack_require__ (app.js:20)
    at Object.defineProperty.value (app.js:14482)
    at __webpack_require__ (app.js:20)
    at Object.<anonymous> (app.js:25614)
    at __webpack_require__ (app.js:20)
    at _typeof (app.js:66)

Patrick Thunder 8 days ago

Also showing similar errors installing Owl Slider on 6.4. I'm considering reverting back to 6.3 in the meantime? Perhaps a video tutorial would shed greater insight with F 6.4 webpack config and npm?

Thanks!

Jonathan Davies 8 days ago

I've had looked into, but still didn't find a solution I spend a bit of time looking with no solution. I've just revered back to using a workable version of 6.3.1 with a few extras I've added in as I am short on time with client projects. As far as I am aware there a large group of people having this problem as well and have done the same until some clarity on a fixed or usage of the framework.

Petr Ogurcak 8 days ago

we run into other issues and I can't find anything on that topic in the forum or in the documentation.
 
I installed two nonmodular scripts. nette.ajax.js and nette-forms
 
Their paths are 
 
node_moudles/nette.ajax.js/nette.ajax.js
 
and when I require it  require('nette.ajax.js'); It works
 
but for nette-forms with the path node_modules/nette-forms/src/assets/netteForms.js
require('nette-forms'); doesn't work.
 
When copying the file to js folder and require it require('./netteForms.js'); It works.
 
 
But I run into issues with a non-defined variable which is defined in one of the files. I assume webpack load them asynchronously so the variable is not defined.
 
Another question is.. when I add the paths to config.yml like this:
 
  # Paths to JavaScript entry points for webpack to bundle modules
  entries:
    - "node_modules/nette.ajax.js/nette.ajax.js"
    - "node_modules/nette-forms/src/assets/netteForms.js"
    - "src/assets/js/app.js"
 
It generates 3 files. Should I have all the scripts in one generated files? Or it's meant to load all the files separately? If so, do I have to load jquery again? As it a part of app.js file.