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

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

The method works like a charm.

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

SVM 2 months 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?

Giuseppina De Guglielmo about 2 months ago

Anyone solved it?  I have same issue with Owl Carousel 2

 

Thanks!

Petr Ogurcak about 2 months ago

this is how our app.js looks like

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

window.$ = $;
window.jQuery = $;

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

var Nette = window.Nette = require('nette-forms');
Nette.initOnLoad();
require('nette.ajax.js'); 
require('owl.carousel');   

$(document).foundation();

Giuseppina De Guglielmo about 2 months ago

This is what I have

app.js

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

window.$ = $;
window.jQuery = $;


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;

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

$(document).foundation();

config.yml

# Your project's server will run on localhost:xxxx at this port
PORT: 8000

# Autoprefixer will make sure your CSS works with these browsers
COMPATIBILITY:
  - "last 2 versions"
  - "ie >= 9"
  - "ios >= 7"

# UnCSS will use these settings
UNCSS_OPTIONS:
  html:
    - "src/**/*.html"
  ignore:
    - !!js/regexp .foundation-mq
    - !!js/regexp ^\.is-.*

# Gulp will reference these paths when it copies files
PATHS:
  # Path to dist folder
  dist: "dist"  
  # Paths to static assets that aren't images, CSS, or JavaScript
  assets:
    - "src/assets/**/*"
    - "!src/assets/{img,js,scss}/**/*"
  # 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"
  # Paths to JavaScript entry points for webpack to bundle modules
  entries:
    - "src/assets/js/app.js"

dependencies.js

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

const deps = {
	Owl: Owl
};

module.exports = deps;

but I got this error:

TypeError: $ is undefined on line:

$.fn.owlCarousel = function (option) {

of my final compiled app.js

 

What am I doing wrong? Any help would be really appreciated.

Thanks,

G.

Negativefix about 2 months ago

Depending on the module you want to use, steps to include it to your project might differ.  For instance I was able to include owl.carousel to my project modifiying webpack config slightly. 

To include owl in your project you are going to need imports-loader for webpack. 

npm install imports-loader

Then modify your webpack to tell it how to resolve jquery. this so thread tells it helps webpack to optimize dependencies better :/

let webpackConfig = {
  resolve: {
    alias: {
        jquery: "jquery/src/jquery"
      }
  }
}

And at last import and initialize owl in your app.js file. You should also add owl module' sass path to your config yaml to make it display right.

import $ from 'jquery';
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';

$(function(){
  var $heroSlide = $('.hero-slide').owlCarousel({
    items: 1,
    singleItem: true,
    dots: true,
    dotsContainer: '#hero-slide-dots'
  });
});

In order to use owl methods, I keep a reference to carousel in $heroSlide variable. So that I can trigger events.

That's  all.

Giuseppina De Guglielmo about 2 months ago

I did this

 npm install imports-loader

in the main root of my project. But I don't know where I should put these:

let webpackConfig = {
  resolve: {
    alias: {
        jquery: "jquery/src/jquery"
      }
  }
}

I don't have any webpack.config.js

Giuseppina De Guglielmo about 2 months ago

I found out where to put

let webpackConfig = {
  resolve: {
    alias: {
        jquery: "jquery/src/jquery"
      }
  }
}

and now everything is working, thank you very very much!