Webpack + Nodejs import bootstrap + jquery

Asked

Viewed 283 times

2

Hello folks from Stackoverflow,

I have a Vuejs project already with Webpack. And I was importing the Jquery and Bootstrap libraries. I went to my Ode and used the commands

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

Okay, I went to my main page Main.

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

I went on a Template Filho ( Footer. ) and tested an Alert

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

Worked perfectly. I then tried to import in the same place the Bootstrap after the Jquery:

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

and the console returns to me: Bootstrap’s Javascript requires jQuery

Because bootstrap does not find Jquery and I tested Jquery before importing bootstrap?

Thank you!

javascript node.js bootstrap vue.js webpack
  • 1

    Do not use jQuery and Vue. If you want to use Vue + Bootstrap you can use https://bootstrap-vue.js.org/

  • Hmm because I can’t use jquery and bootstrap with vuejs?

  • You can, but you shouldn’t, these are very different ways to program and manage the application status. And if it’s a new project then it’s time to leave jQuery. Related: https://answall.com/q/234059/129

  • So, it’s not a new project. I’m migrating an existing project to Vuejs. And in this project I use Jquery Datatable a lot... It’s bad for me to leave jquery like this

  • I understand. Try to adapt to Vue datatables, there are some to choose from. If you have to, put jQuery together, but if it’s not too much effort, you’d better take.

  • Got it... Anyway, will the Imports bug keep on hounding me or is there some way to fix it? Thanks!

Show 1 more comment

1 answer

1


Join the jQuery plugin in the webpack to make it available in the application:

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

And when you install jQuery and Bootsrap you must have the flag --save and not --save-dev because they are dependencies of production.

  • I opened my Webpack.config and it has no plugins, but it has this here: " module.exports.plugins = (module.exports.plugins || []). Concat([ <- CODE -> ]) . I tried to put inside the 'Code', compiled again and the error continues =/

  • 1

    @Does Jackson have this project online? like on github or zipped folder?

  • 1

    Got it here, I put it as the last parameter of the module.Xports and it worked! Thanks =)

Browser other questions tagged javascript node.js bootstrap vue.js webpack

You are not signed in. Login or sign up in order to post.