Electron-vue: jquery bootstrap issue

[mattloose]

Found an issue or bug? Tell me all about!

I can't add bootstrap or jquery to this.

Describe the issue / bug.

#

I've seen issue 36 here:
https://github.com/SimulatedGREG/electron-vue/issues/36

Which refers to adding a jquery link to the webpacj.config.js like:

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

But there is no webpacj.config.js that I can determine. I presume I need to add something similar to one of the other webpack files - either main or renderer, but I still get the error saying that bootstrap requires jquery?

Any suggestions?

Thanks.

[utkukaratas]

I haven't gotten to the root of this problem as webpack still sounds like voodoo incantations to me but here's my trick to temporarily avoid this problem:

With bootstrap and jquery files resting in app/dist, here is my index.ejs

<script src="js/jquery.js"></script>
<script>
    try {
        $ = jQuery = module.exports;
        // If you want module.exports to be empty, uncomment:
        // module.exports = {};
    } catch(e) {}
</script>
<script src="js/bootstrap.js"></script>

Not the best solution but it works for now.

[mattloose]

Glad someone else has this problem - I don't grok web pack at all!

So adding that to the index.ejs seems to work in the sense that my content loads and I get no jquery errors. However, bootstrap tabs within a vue component are not rendering. Do I have to import the bootstrap CSS within the vue component do you know?

Thanks for your help.

[utkukaratas]

It's only that weird jquery bundling issue that infests me. CSS importing works as expected in both the index.ejs or in one of your components. (Indeed I do import the bootstrap.css in my App.vue. Ideally all the js should also be imported there at App.vue but couldn't figure it out yet.)

BTW none of this is a electron-vue issue, what we're experiencing are webpack intricacies.

... Oh and you should init your jquery/bootstrap components in your vue component's .update() function.

[mattloose]

Embarrassingly, after implementing your fix, this was my error on the bootstrap side. This has fixed it, but I am no further on understanding really how web pack is working here.

I'd like to add additional libraries but webpack seems poorly documented for noobs like me! Thanks for your help. I will leave this issue open as - to my mind - it is currently resolved with a hack, not a webpack compatible solution.

[SimulatedGREG]

Sorry for the late reply everyone, but yes this is not a direct issue with electron-vue and more related to how webpack will handle things. The important part for bootstrap is that it needs to be able to access jQuery from the window.

@utkukaratas's recent comment is probably the closest solution to get this working with original software. But if you want a more proper Vue solution, take a look at http://yuche.github.io/vue-strap/.

[SimulatedGREG]

Gonna go ahead and close this as it isn't a direct issue with electron-vue. Feel free to ask any other questions.

[AmyXS]

Took me quite a while to get Bootstrap working so i thought I'd share it..with Bootstrap 4 alpha 6, I added this to both webpack.render.config.js and webpack.main.config.js under "plugins:"

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

Also did what Greg suggested in issue #36 to .eslintrc.js. And adding import for jQuery and Tether in main.js before importing bootstrap.js.

[Xosmond]

Thank you guys 👍