foundation-sites: jQuery.foundation() is not a function

@justrhysism You can import a single plugin straight from that plugin’s file (e.g. import { Reveal } from 'foundation-sites/js/foundation.reveal';

If you’re doing stuff by hand, it may well be straightforward for you to do the instantiation yourself using a direct constructor (e.g. var thisReveal = new Reveal($('#my-reveal'), options)).

Or if you want to use the jquery helper (e.g. $(document).foundation()) you’d want to do something like:

// import jQuery
import $ from 'jquery';
// import core foundation (possibly misnamed due to legacy) 
// to allow global bookkeeping & jquery helper
import { Foundation } from 'foundation-sites/js/foundation.core';
// import component
import { Reveal } from 'foundation-sites/js/foundation.reveal';

// set up the $.fn.foundation helper so you can just grab 
// DOM elements and call foundation on them
Foundation.addToJquery($);

// Tell Foundation global bookkeeping/jquery helper about Reveal plugin
Foundation.plugin(Reveal, 'Reveal');

Let me know if this makes sense or what doesn’t… really want to make the docs for this better.

Hi @kball So I am using npm(npm v. 5.1.0) for installing foundation-sites. Below is a part of my packages.json file:

...
"dependencies": {
    "foundation-sites": "^6.4.0",
    "jquery": "^2.2.4"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.min.js",
    "foundation": "./node_modules/foundation-sites/dist/foundation.js"
  },
  "browserify-shim": {
    "jquery": "jQuery",
    "foundation": "foundation"
  },
  "browserify": {
    "transform": [
      "babelify",
      "browserify-shim"
    ]
  },
...

In my index.js file I import all necessary foundation modules, like so:

...
import $ from 'jquery';
import 'foundation-sites';
import 'foundation-sites/js/foundation.core';
import 'foundation-sites/js/foundation.util.mediaQuery';
import 'foundation-sites/js/foundation.toggler';
import 'foundation-sites/js/foundation.sticky';
...

And the mentioned problem (foundation is not a function) occurs when I try to call $(document).foundation(); function.

But as I mentioned before, if I run Foundation.addToJquery($); function first, then I can initiate foundation framework.

Thank you! I’ve been trying to figure this out for weeks and Foundation.addToJquery($); finally did the job.

I have a question. In bower_components/foundation-sites/js, there is a folder called “entries” with “foundation.js” and “foundation.plugins.js”. How are these meant to be used?

I’m new to module bundling, and my setup is basically Gulp, Browserify, and Babelify. Been having a pretty hard time understanding how to approach bundling as the documentation already assumes a solid understanding. Help in this area would be really great.

Thanks for you timely response @kball, much appreciated.

Ah right - yes, being able to use the plugin directly is much nicer.

For thread followers:

import $ from 'jquery';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

const options = { /* Reveal Options, if any */ };
const $myRevealElement = $('#my-reveal-selector');
const myReveal = new Reveal($myRevealElement, options);

I’m using Foundation with Vue, and it’s good practice (particularly for event listeners) to “clean up” in Vue’s beforeDestroy() lifecycle method. I noticed that there’s a _destroy() method on the class, but being prefixed with an underscore _ seems to indicate that it’s private. Is there any reason this method is private? Or is this something which involves greater discussion and I should open another Github issue?