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?

 

powellian almost 2 years ago

@Giuseppina De Guglielmo - or anyone else ...

Where did you add that exactly?

I'm grappling with the exact same issue. I've tried it in various styles in webpack.config.js (but 'let' tells me poss that's the wrong location). I've added it to 'app.js' but nothing works so far.

I have npm installed imports-loader so everything is in place. I just need to know exactly where to add that 'webpackConfig' object.

Thanks.

Negativefix almost 2 years ago

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

powellian almost 2 years ago

@Negativefix

Thanks for that, works fine. I hadn't looked in Gulp, couldn't see the wood for the trees.

What is frustrating is that in app.js I was previously running it with 'foundation-explicit-pieces' instead of the whole of 'foundation-sites' loading:

 

That's how I prefer to roll it so I can then optimise the JS but this broke webpack when trying to integrate Owl, so I reversed that and it worked.

@Zurb @yetinauts any chance you have a look at that please ;)

Also I've broken the files out in modular fashion, taking Owl out of app.js. So here's how I'm loading Owl now:

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

$(document).foundation();

/**
 * Project files:
 * */
import './ka-modules/ka-loader';

./ka-modules/ka-loader

import './carousels/homepage-carousel';

./carousels/homepage-carousel

import $ from 'jquery';
import 'imports-loader?jQuery=jquery!owl.carousel';

$('#homepage-carousel').owlCarousel({
	loop:true,
	margin:10,
	nav:true,
	// items: 10,
	responsive:{
		0:{
			items:1
		},
		600:{
			items:3
		},
		1000:{
			items:5
		}
	}
})
console.log("#homepage-carousel");

And it all works fine.

@Negativefix thanks for your steer! Have learnt from this one.

Giuseppina De Guglielmo almost 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

powellian almost 2 years ago

@Giuseppina De Guglielmo

Thanks, I've applied that and done a bunch of other stuff, as noted in my post above and all is working fine now. Hopefully some documentation will appear to make this all clearer!

Urs Bräm over 1 year 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'
  });
});

 

 

Urs Bräm over 1 year ago

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

$(document).foundation();

Urs Bräm over 1 year 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)

 

 

Gabriel Bajada over 1 year ago

I don't know what I did, but even after going through all this, I still haven't managed.

 Do you have to run anything on terminal after saving config.yml or gulpfile.babel.js?

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.

giovanni rivera 4 months ago

I'm having continuous problem installing sweetalert2. Every time I try I get this error  Not Found: har-validator@5.1.2 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.