WebPack + NodeJS import bootstrap + jquery

2

Hello, everyone at Stackoverflow,

I have a VueJS project already with Webpack. And I've been importing the JQuery and Bootstrap libraries. I went to my node and used the commands

npm install jquery --save-dev
npm install bootstrap --save-dev

Okay, I went to my main page Main.vue

window.$ = window.jQuery = require('jquery');

I went into a Son Template ( Footer.vue ) and tested an alert

$('document').ready(function(){ alert('JQuery Worked!') });

It worked perfectly. I then tried to import Bootstrap after Jquery :

window.$ = window.jQuery = require('jquery');
import 'boostrap'

and the console returns me: Bootstrap's JavaScript requires jQuery

Why does not the bootstrap find Jquery and test Jquery before importing the bootstrap?

Thank you!

    
asked by anonymous 20.09.2017 / 15:56

1 answer

1

Put the jQuery plugin in the webpack so it's available in the application:

// webpack.config.js
module.exports = {
    ...
    plugins: [
        new webpack.ProvidePlugin({
           $: "jquery",
           jQuery: "jquery"
       })
    ]
};

And when you install jQuery and bootsrap you should have the --save flag and not --save-dev because they are production dependencies.

    
20.09.2017 / 16:19