How to make Electron work with the most recent versions of jQuery, Popper and Bootstrap?

user_15791388 0
Viewed 659

I am trying to make my Electron app work with the most recent versions of jQuery, Popper and Bootstrap. Unfortunately, neither referencing jQuery, Popper and Bootstrap nor "requiring" them in the <head> section of index.html (renderer process) does work.

I tried (option 1):

<script src='./node_modules/jquery/dist/jquery.min.js'></script>
<script src='./node_modules/@popperjs/core/dist/cjs/popper.js'></script>
<script src='./node_modules/bootstrap/dist/js/bootstrap.min.js'></script>
<link rel='stylesheet' type='text/css' media='screen' href='./node_modules/bootstrap/dist/css/bootstrap.min.css'>

And I tried (option 2):

<script>let $ = require('jquery');</script>
<script>require('popper.js');</script>
<script>require('bootstrap');</script>
<link rel='stylesheet' type='text/css' media='screen' href='./node_modules/bootstrap/dist/css/bootstrap.min.css'>

Anyhow, I would like to maintain nodeIntegration: false if possible. Therefore, I prefer the first option (without require).

I get these errors (option 1):

Uncaught ReferenceError: exports is not defined in "popper.js" ...

index.html:85 Uncaught ReferenceError: $ is not defined ...

And I get there errors (option 2):

Uncaught Error: Cannot find module 'popper.js' ...

jQuery.Deferred exception: $(...).tooltip is not a function TypeError: $(...).tooltip is not a function ...

TypeError: $(...).tooltip is not a function ...

These are the npm packages I am using:

@popperjs/core": "^2.9.2"
"bootstrap": "^5.0.0"
"electron": "^12.0.7"
"jquery": "^3.6.0"

Is there any "best practice" way to include Bootstrap 5.0 (incl. the required "packages" jQuery and Popper) in my Electron app?

PS: I have found many tutorials and hints on the Internet, but none of the approaches I have found seems to work with the most recent version of Bootstrap, etc.

bootstrap-5 electron popper.js jquery
2 Answers

You cannot refer to node_modules until you explicitly mention it. Moreover Explicit mentioning is a Security Threat

For Bootstrap 5 Just add:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

For jQuery add:

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

You Just Copy their CDN File as you usually do when programming for a browser. It will work for Electron Too.

user_141767860

I managed to set it up using:

package.json

"bootstrap": "^5.0.2",
"@popperjs/core": "^2.9.2",
"jquery": "^3.6.0"

and in renderer.js

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

Now everything seems to work properly

user_73569420
Related