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?

 

KSP over 2 years 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.

Rafi Benkual over 2 years 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'

});

 

Vaughn D. Taylor over 2 years 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.

Rabi Hernandez over 2 years 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? 

Ali Hellani over 2 years 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) ?

Urs Bräm almost 2 years ago

Whew! Thanks to all!

So just to resume (I appear to be on Foundation 6.4.1) how one would add owl carousel (for example)

npm install imports-loader (I had to sudo)

config.yml

  # Paths to Sass libraries, which can then be loaded with @import
  sass:
    - "node_modules/foundation-sites/scss"
    - "node_modules/motion-ui/src"
    - "node_modules/owl.carousel/src/scss"

gulpfile.babel.js

let webpackConfig = {
  resolve: {
    alias: {
        jquery: "jquery/src/jquery"
      }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

app.js

import $ from 'jquery';

// import js libraries with webpack
// requires npm install imports-loader (sudo maybe required)
// check https://foundation.zurb.com/forum/posts/53526-how-to-add-npm-package-js-file-to-foundation-64
import 'imports-loader?jQuery=jquery!owl.carousel';

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';

// custom JS as we're used to
$(function(){
  var $slider = $('.slider').owlCarousel({
    items: 1,
    singleItem: true,
    dots: true,
    dotsContainer: '#slider-dots'
  });
});

 

 

Negativefix about 2 years ago

@powellian webpack config is included in the gulpfile.js.

Urs Bräm almost 2 years ago

 too bad you can't edit here. I think above in app.js this should also enter...

$(document).foundation();

Urs Bräm almost 2 years ago

Also, don't forget in

app.scss

@import 'owl.carousel.scss';
@import 'owl.theme.default.scss';

(the path for this was given in config.yml)

 

 

kinich over 1 year ago

This was of TREMENDOUS help to me on these two porjects i'm doing at work.

 

I was so frustrated with trying to install Owl carousel... when just 6 months ago i was able to do it with no issues.

 

I added jquery.alphanum to one of my projects.

 

These forums are usually not much help. But this time you guys saved me.

Patrick Thunder about 2 years 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!

Bren over 2 years 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.

Giuseppina De Guglielmo about 2 years ago

This is what solved my issue:

 

let webpackConfig = {
  resolve: {
    alias: {
        jquery: "jquery/src/jquery"
      }
  },
  module: {
    rules: [
      {
        test: /.js$/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

in my gulpfile.babel.js file

Rabi Hernandez over 2 years ago

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

The method works like a charm.

Sensaetions about 2 years ago

What I've noticed is that this undefined variable error only appears to be affecting plugins that are written using self-invoking scripts. Does anyone have a reason why that would be the case? How can this be resolved?

Also, it appears that this happens to plugins that doesn't have an ES6 export option. What is Zurb the recommendation on using plugins that doesn't have ES6 support? How can we still include non-ES6 plugins in our projects?

Petr Ogurcak over 2 years 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?

Sensaetions about 2 years 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)

Jonathan Davies about 2 years 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.

giovanni rivera 8 months ago

I'm having continuous problem installing sweetalert2. Every time I try I get this error  Not Found: [email protected] mo matter how I do this still get the same error windows and mac. With the previous version I was successful but not anymore. Any reason why is this happening webpack maybe?

 

I was able to install sweetalert2 on a custom empty folder with just npm init and than npm install sweetalert2 but on a foundation-zurb template folder no success. 

Petr Ogurcak about 2 years 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.