Menu icon Foundation
Importing Foundation 6 babel / es6 / webpack

I'm using Babel, ES6, and Webpack to bundle and transpile my javascript with the amazing vue.js.

I've installed Foundation 6 via using: npm install 'foundation-sites' --save

I also imported it like so inside of main.js.

 

import { jQuery, $ } from 'jquery'
window.$ = $
window.jQuery = jQuery

import 'foundation-sites'


$(document).foundation()

 

But when I run my web server on local host: npm run dev

I get "Uncaught ReferenceError: jQuery is not defined.  It seems that the npm installation is outside of the scope of this import.

In the console, line 386 }(jQuery); is highlighted as causing the error.

  // Convert PascalCase to kebab-case
  // Thank you: http://stackoverflow.com/a/8955580
  function hyphenate(str) {
    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  }
}(jQuery);
'use strict';

!function ($) {

 

If you can point me to documentation or a solution that would be awesome.

 

References:

http://foundation.zurb.com/sites/docs/installation.html#package-managers (installing via npm)

http://stackoverflow.com/a/34340392/1783439 (importing jquery)

Babeles6npmwebpackReferenceErrorvue.js

I'm using Babel, ES6, and Webpack to bundle and transpile my javascript with the amazing vue.js.

I've installed Foundation 6 via using: npm install 'foundation-sites' --save

I also imported it like so inside of main.js.

 

import { jQuery, $ } from 'jquery'
window.$ = $
window.jQuery = jQuery

import 'foundation-sites'


$(document).foundation()

 

But when I run my web server on local host: npm run dev

I get "Uncaught ReferenceError: jQuery is not defined.  It seems that the npm installation is outside of the scope of this import.

In the console, line 386 }(jQuery); is highlighted as causing the error.

  // Convert PascalCase to kebab-case
  // Thank you: http://stackoverflow.com/a/8955580
  function hyphenate(str) {
    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
  }
}(jQuery);
'use strict';

!function ($) {

 

If you can point me to documentation or a solution that would be awesome.

 

References:

http://foundation.zurb.com/sites/docs/installation.html#package-managers (installing via npm)

http://stackoverflow.com/a/34340392/1783439 (importing jquery)

Chad Nelson about 3 years ago

Solved

I ran: npm install --save-dev script-loader

Used these import statements inside of main.js:

import 'script!jquery'
import 'script!what-input'
import 'script!foundation-sites'

Added externals to webpack.config 

externals: {
foundation: 'Foundation'
},

Attached foundation to my vue.js component like so:

<script>
export default {
ready () {
$(this.$el).foundation()
}
}
</script>

 

More details about this problem and the solution:

https://github.com/vuejs-templates/webpack/issues/254

 

These links helped me to solve the problem:

https://forum.vuejs.org/topic/3567/foundation-6-vue-cli-with-vue-routing/3

http://stackoverflow.com/a/35373347/1783439

 

Stefan Frank about 2 years ago

var $ = require('jquery');

window.$ = $
window.jQuery = $
window.$(document).foundation()

instead of the import did the trick for me: The reason here seems to be, that the require works synchronously and actually waits for the until jquery has been resolved, whereas the import works asynchronous and you hit upon the reference-error. Until there is a fix for jquery to behave properly with imports, this way to initialize foundation works good enough for me...

Until there is a fix for jquery to behave properly with imports, this way to initialize foundation is simple enough and I can live with the slight performance-hit for the synchronous resolve...