Why does Electron page not directly load JQuery?

Question

Recently, I want to write a application with electron and bootstrap. I use the snippet on the get started page of bootstrap. Just like the below.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>
</html>

It is a very simple page and works fine by directly opening with browsers. However, when I start it by new BrowserWindow on electron such like this.

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // and load the index.html of the app.
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

It would get the error of

I try many methods and fixed it by local requiring jquery like this

  <script>
    window.jQuery = window.$ = require('jquery');
  </script>
  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>

But I wondering why does it encounter that error? All sources of the scripts on bootstrap snippet are from CDN and work fine on the browser. It should be work on electron.

Open the dev tools and show on the network tab to so whats happening and why it dosnt load. — Marc, Sep 29 '20 at 13:32

score -1 · Answer 1 · answered Sep 29 '20 at 13:02

-1

I think it might be that because a Node.js context is available in Electron, jQuery thinks it's running on Node and acts as if jQuery was required on Node - which is fundamentally different from the browser. I would be surprised though, because I thought that jQuery checks first if a window object exists, which should be the case in Electron.

answered Sep 29 '20 at 13:02

Sebastiaan Marynissen

134
1
3

Thats not true, there is no "run in node mode" in jquery. – Marc Sep 29 '20 at 13:32
If you look at the source code of 3.5.1 (https://unpkg.com/jquery@3.5.1/dist/jquery.js) you'll find on line 18: ```if ( typeof module === "object" && typeof module.exports === "object" )``` so jQuery *does* make a difference between running in the browser and Node. – Sebastiaan Marynissen Sep 29 '20 at 14:07
I tested it and if you disable nodeIntegration when creating the BrowserWindow you don't get the error. This indicates that the Node context being present here does play a role. – Sebastiaan Marynissen Sep 29 '20 at 14:22
I found the cause, on line 10864 you have `if (typeof noGlobal === 'undefined') { window.jQuery = window.$ = jQuery; }` When running with the nodeContext, noGlobal is set to true, as per line 28, which is why `$` is not exported on the window and hence bootstrap can't find it. – Sebastiaan Marynissen Sep 29 '20 at 14:30
He did mention that he was able to solve it, and explicitly asked why it didn't work, which is what I explained in my answer. – Sebastiaan Marynissen Sep 29 '20 at 16:10
@SebastiaanMarynissen Thank you very much. I think this is what I want. – Lin Yun Wen Sep 30 '20 at 15:40

Why does Electron page not directly load JQuery?

1 Answers1