Enijar Enijar - 3 months ago 58
Javascript Question

Error using Bootstrap & jQuery Packages in ES6 with Browserify

I'm trying to use Bootstrap with jQuery. I'm using Browserify with a Babel transform to compile. I get the following error.

Uncaught ReferenceError: jQuery is not defined


I've tried importing the packages like this, but I get the above error.

import $ from 'jquery';
import Bootstrap from 'bootstrap';


Searching around, I found this answer, so I tried this but I still get the same error.

import $ from 'jquery';
window.$ = window.jQuery = $;
import Bootstrap from 'bootstrap';
Bootstrap.$ = $;


Am I importing these packages incorrectly with ES6 or is it done in a different way? The last thing I tried was importing the packages without ES6 like this, but I still got the same error.

window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap');
Bootstrap.$ = $

Answer

As mentioned by Pete TNT, there is a bug in the Bootstrap package I am using. I switched to using this Bootstrap package and made the following changes to my code.

window.$ = window.jQuery = require('jquery');
var Bootstrap = require('bootstrap-sass');
Bootstrap.$ = $;
require('../../../../../node_modules/bootstrap-sass/assets/javascripts/bootstrap');

It looks like, for the time-being, ES6 imports will not work with jquery and bootstrap packages in the way I was trying to use them.

Comments