Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.$ = $
like image 462
Enijar Avatar asked Dec 06 '15 17:12

Enijar


People also ask

What is a bootstrap alert?

Bootstrap Alerts are used to provide an easy way to create predefined alert messages. Alert adds a style to your messages to make it more appealing to the users. There are four classes that are used within <div> element for alerts. .alert-success.

What is bootstrap cross validation?

This bootstrap cross-validation (BS-CV) allows model selection to be made on the basis of predictive ability by comparing the median values of ensembles of summary statistics of testing data.

How do I make bootstrap alerts automatically disappear?

Closing Alerts To close the alert message, add a . alert-dismissible class to the alert container. Then add class="close" and data-dismiss="alert" to a link or a button element (when you click on this the alert box will disappear).


2 Answers

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

like image 110
Heroselohim Avatar answered Sep 17 '22 12:09

Heroselohim


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');
like image 21
Mihkel Selgal Avatar answered Sep 19 '22 12:09

Mihkel Selgal