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

[alexey2baranov]

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

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

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

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

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

'

[CyrilWork]

I think bootstrap uses the <script> tag pattern for modules . Put your own javascript at the end script as in the example here https://v4-alpha.getbootstrap.com/getting-started/introduction/#quick-start in another tag. use the global variables

[alexey2baranov]

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

[IamManchanda]

I agree with @alexey2baranov

[DavidStrada]

@alexey2baranov Bootstrap in most of it's plug-ins relay on having $/jQuery available globally so that's why you get that message, what you could try is making jQuery available globally and avoid this message, I know it's a dirty hack but until they start including their dependencies I'm afraid is your only option.

e.g.

import $ from "jquery"
window.jQuery = $
...

[DavidStrada]

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

[christianirack]

Testing with this

import jquery from 'jquery'
window.jQuery = jquery
require('bootstrap')

[alexey2baranov]

Do same with Teather and it will work

7 мая 2017 г. 1:07 PM пользователь "Christian Irack" <
[email protected]> написал:

Testing with this

import jquery from 'jquery'
window.jQuery = jquery
require('bootstrap')

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/twbs/bootstrap/issues/21790#issuecomment-299689372,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ASW3ZPR1DflEK7F6K8FPT3FF1bN5V_DNks5r3Xu-gaJpZM4LpQX4
.

[Johann-S]

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

[rolele]

@Johann-S The doc is not rendered well. I see all the {% highlight js %} commands.

[wolfy1339]

@rolele that's not the compiled docs. That's the source.

[anarerdene]

Also demo links not working.

[peterbarraud]

Hey does anyone else get this error:
Uncaught Error: Bootstrap dropdown require Popper.js
So I do
require('popper');
And get this error:
Cannot find module 'rijs.resdir' from 'C:\Users\barraud\Documents\tech\browserify-prototyping\rapo-browserify-part-2-external-css\node_modules\popper\dist'

[Johann-S]

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

[peterbarraud]

Thanks for the super quick response but it still gives the same error. The includes in my file are as such:

const $ = require('jquery');
window.jQuery = $;
window.Popper = require('popper')
require('bootstrap');

[Johann-S]

be sure to use the last release of Popper.js (1.12.5) not the one required by the beta 1 (1.11.0)

[peterbarraud]

When I run npm -v popper it shows 4.2.0. What is that supposed to mean?

[Johann-S]

Because the package name is popper.js 😉

[peterbarraud]

Thanks much @Johann-S . It now works perfect :)