Menu icon Foundation
Foundation method don't work with Webpack

Hi community,

I use Foundation with Webpack, and the foundation() method don't work. Example :

import { Reveal } from 'foundation-sites/js/foundation.reveal';
const element = new Foundation.Reveal($('#element'));

Become :

import { Reveal } from 'foundation-sites/js/foundation.reveal';
const element = new Reveal($('#element'));

So, i can't run $('#elemen').foundation('open'); :/

I've try to import foundation.core module, but no result :

import { Foundation } from 'foundation-sites/js/foundation.core';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

const element = new Reveal($('#element'));

 

Anyone can help me ?

 

Thank you community :)

webpack

Hi community,

I use Foundation with Webpack, and the foundation() method don't work. Example :

import { Reveal } from 'foundation-sites/js/foundation.reveal';
const element = new Foundation.Reveal($('#element'));

Become :

import { Reveal } from 'foundation-sites/js/foundation.reveal';
const element = new Reveal($('#element'));

So, i can't run $('#elemen').foundation('open'); :/

I've try to import foundation.core module, but no result :

import { Foundation } from 'foundation-sites/js/foundation.core';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

const element = new Reveal($('#element'));

 

Anyone can help me ?

 

Thank you community :)

Bren about 2 years ago

Try this:

import { Foundation } from 'foundation-sites/js/foundation.core';
import { Reveal } from 'foundation-sites/js/foundation.reveal';

// Assuming jQuery is loaded as a global $
// See: https://webpack.js.org/plugins/provide-plugin/
// This was the KEY to getting Foundation 6.4 working for me.
Foundation.addToJquery($);

const element = new Reveal($('#element'));
// element.open();
// See: http://foundation.zurb.com/sites/docs/javascript.html

// This might also be necessary.
$(document).ready(function () {
  // This ONLY works when .addToJquery is called above!
  $(document).foundation();
}