bootstrap: Error jQuery must be included before Bootstrap's JavaScript

I’am very new in Bootstrap. So my step by step

install bottstrap as written hire https://v4-alpha.getbootstrap.com/getting-started/download/#npm
install jquery by npm i jquery
write a code

import $ from 'jquery'
require('bootstrap')

run it on webpack-dev-server npm run dev
And finally get error

Uncaught Error: Bootstrap’s JavaScript requires jQuery. jQuery must be included before Bootstrap’s JavaScript. at eval (eval at <anonymous> (app.js:690), <anonymous>:8:9) at Object.<anonymous> (app.js:690) at webpack_require (app.js:556) at fn (app.js:87) at eval (eval at <anonymous> (app.js:684), <anonymous>:17:1) at Object.<anonymous> (app.js:684) at webpack_require (app.js:556) at fn (app.js:87) at Object.<anonymous> (app.js:587) at webpack_require (app.js:556)

’

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 18 (5 by maintainers)

Most upvoted comments

hmmmm… old scool scripting in 2017 year? doesn’t bootstrap 4 support commonjs or es6 importing?

i suppose if my some module use jquery it will be included in webpack boundle and another version of jquery will be at the end of body tag just for bootstrap works. so i will get double included jquery library on my page. I think there should be another way for including bootstrap into webpacked projects

+16

alexey2baranov on Jan 24, 2017

Also given that you’re using webpack as a work around you could try this.

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

Wepack Docs

DavidStrada on Jan 25, 2017

Thanks much @Johann-S . It now works perfect 😃

peterbarraud on Sep 8, 2017

Because the package name is popper.js 😉

Johann-S on Sep 8, 2017

Popper.js should be available in the Window scope so you should do : window.Popper = require('popper')

Johann-S on Sep 7, 2017

Now we have a doc on how to use Bootstrap with Webpack : https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/getting-started/webpack.md

Johann-S on Jun 13, 2017

Testing with this

import jquery from ‘jquery’ window.jQuery = jquery require(‘bootstrap’)

christianirack on May 7, 2017