Error using Bootstrap & jQuery Packages in ES6 with Browserify

Question

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.$ = $

Why are you trying to import the files like this, any specific use case? — Nick Snick
– Nick Snick, Commented Dec 6, 2015 at 17:17
I'm importing them because that's how browserify works. You import packages like this and then compile them into one js file. — James Craig
– James Craig, Commented Dec 6, 2015 at 17:19
Are they located in the same folder as the .js file you're importing them in? — Nick Snick
– Nick Snick, Commented Dec 6, 2015 at 17:20
@NickKenens All my packages are inside a node_modules directory. I have no problem with any of the packages that are inside the node_modules. The problem only occurs when I try to use the bootstrap package. — James Craig
– James Craig, Commented Dec 6, 2015 at 17:23
This is getting fixed for BS4 hopefully soon, see github.com/twbs/bootstrap/issues/17201 — Pete TNT
– Pete TNT, Commented Dec 6, 2015 at 17:24

Mihkel Selgal · Accepted Answer · 2016-12-30 10:12:02Z

10

The accepted answer helped me to right track but the final solution for me was a bit shorter so I will post also here.

// Importing jQuery in ES6 style
import $ from "jquery";

// We need to expose jQuery as global variable
window.jQuery = window.$ = $;

// ES6 import does not work it throws error: Missing jQuery 
// using Node.js style import works without problems
require('bootstrap');

answered Dec 30, 2016 at 10:12

Mihkel Selgal

5086 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahesanali Suthar Over a year ago

I like this solution totally instead of writing plugin section in webpack configuration.

Community · Accepted Answer · 2017-05-23 12:34:50Z

3

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.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Dec 6, 2015 at 17:50

James Craig

6,90210 gold badges50 silver badges78 bronze badges

3 Comments

Vinicius Braz Pinto Over a year ago

FYI, I got it working with the original bootstrap package just by using require() instead of import.

iraklisg Over a year ago

@Enijar "It looks like, for the time-being, ES6 imports will not work with jquery and bootstrap packages" Is this still the case in 2016, because I cannot also import bootstrap-saas and its dependency jquery using ES6 modules syntax

joe.js Over a year ago

this worked for me. is there a more clean way of doing it?

Heroselohim · Accepted Answer · 2017-05-29 16:08:28Z

2

I've tried many many solutions but for some reason I had to define the global jquery in lowercase on the base script (eg. main.js)

import jQuery from 'jquery'
global.jQuery = jQuery
global.jquery = jQuery // jquery lowercase was the solution for me
global.$ = jQuery
let Bootstrap = require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'

This solutions also works for vue-cli + jquery + bootstrap

answered May 29, 2017 at 16:08

Heroselohim

1,3011 gold badge19 silver badges23 bronze badges

Comments

Asim K T · Accepted Answer · 2016-09-04 11:15:00Z

0

@Enijar's solution didn't work for me. Had to use old CDN method.

<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   
integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   
crossorigin="anonymous"></script>

https://code.jquery.com/

answered Sep 4, 2016 at 11:15

Asim K T

18.5k14 gold badges84 silver badges108 bronze badges

Collectives™ on Stack Overflow

Error using Bootstrap & jQuery Packages in ES6 with Browserify

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related