I am trying to load bootstrap.js using browserify, Laravel elixir. I use npm to install the packages. Everything seems good but when i try to load my page is shows "Error: Bootstrap's JavaScript requires jQuery". I have googled lot but didn't find any solution that works. Here is my codes :
resources/assets/js/app.js
import $ from 'jquery';
import Bootstrap from 'bootstrap-sass'
package.json
{
"private": true,
"scripts":
{
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies":
{
"gulp": "^3.9.1",
"laravel-elixir": "^5.0.0",
"bootstrap-sass": "^3.0.0",
"laravel-elixir-vueify": "^1.0.0"
},
"dependencies": {
"jquery": "^2.2.4"
}
}
I ran into the same issue and it evidently doesn't matter that you import jquery first , bootstrap will always be pulled in at the top of the compiled file. My solution was to compile without jquery then use mix.scripts, like
mix.scripts([
"jquery.js",
"app.js"
]);
to make sure jquery is included before bootstrap.
Hope that helps.
window.jQuery = window.$ = require('jquery');
@Francismori7 Worked like a charm !! thank you .. My question is what is wrong in my approach ??
@wahidsherief imports are, to my knowledge, only available in the current scope (current file?) while setting the variable in the whole context makes it available everywhere.
For all the future googlers, I solved the problem with
mix.autoload({
jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});
Please or to participate in this conversation.