Integrate jQuery into a electron app

Question

I'm trying to add jquery functionality to a desktop app written in electron Using the electron-quick-start repo i'm adding the downloaded jquery file to the main.html file like so:

<script> require("./jquery.min.js"); </script>

or so:

<script>window.$ = window.jQuery = require('./jquery.min.js');</script>

Then in the index.js file i'm adding code in the createWindow function, since that seems the proper place, but to be honest any place i try gets me the same error more or less.

mainWindow.$ is undefined and the same goes for BrowserWindow and app

mainWindow is defined inside the createWindow function like so: mainWindow = new BrowserWindow({width: 800, height: 600})

and BrowserWindow is declared on top of the file like so: const BrowserWindow = electron.BrowserWindow

Any idea where i'm going wrong, what declarations i should change/add?

Thanks in advance

Possible answer: https://stackoverflow.com/a/37480521/1061836 — Trees4theForest, Sep 15 '17 at 23:32

score 19 · Answer 1 · answered Nov 28 '16 at 04:50

19

While using electron, some additional symbols are also inserted into DOM causing problems. So, you can use jquery as follow

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

Notice the code inside "onload".

answered Nov 28 '16 at 04:50

Hari Das

10,145
7
62
59

`jQuery requires a window with a document` unfortunately, none of the answers I've found on any website have worked. – adamj Dec 30 '17 at 04:17

Shakespeare · Answer 2 · 2017-04-01T09:55:48.260

9

When you call require inside index.js, or the main process, it's looking for the node module. So you'll need to install jQuery via npm and save it as a dependency in your apps package.json file.

npm install jquery --save

Then your index.js should theoretically see it just fine using

let $ = require('jquery');
mainWindow.$ = $;

Refer to the Node.JS section for installing jQuery. This is what Electron uses.

--

OLD ANSWER

Inside your main.html, just include the JavaScript like you would any traditional JS file.

<script src="./jquery.min.js"></script>

edited Apr 01 '17 at 09:55

answered Jun 10 '16 at 10:02

Shakespeare

1,286
9
15

that doesn't seem to solve the issue. Besides, i thought the require statement already took care of that. And the issue is with visibility inside the index.js file. If i add a console.log($) statement after the require statement i get what i would expect. It's just that the visibility does not translate to the index.js file – omu_negru Jun 10 '16 at 10:04
@omu_negru Sorry I misunderstood what you were asking. I've updated my answer with the steps that should resolve your issue. Let me know if it doesn't work – Shakespeare Jun 10 '16 at 10:15
Thanks, but this is causing the app to throw another exception `require(...).jsdom(...).createWindow is not a function` – omu_negru Jun 10 '16 at 10:40
@omu_negru Could you share the code of your `index.js`? Not too sure why that would be an error – Shakespeare Jun 10 '16 at 12:15
@omu_negru also, do you want me asking why you want jQuery available in your main process? – Shakespeare Jun 10 '16 at 12:23
note, it should be `npm install jquery --save` (lowercase) to get the latest version of jquery – TimoSolo Nov 24 '16 at 09:24

score 1 · Answer 3 · answered Nov 24 '20 at 05:56

To integrate jQuery into your Electron Application follow these simple steps

Step 1: Run in terminal

npm install jquery --save

Step 2: Add this line to your angular.json or angular-cli.json file

 "build": {
        "options": {
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js", //add this line
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
...
...
     }
  }

Step 3: Finally add this line to your index.html file

 <!-- Need this for jQuery electron -->
  <!-- Insert this line above script imports  -->
  <script>if (typeof module === 'object') {
    window.module = module;
    module = undefined;
  }</script>

  <!-- Insert this line after script imports -->
  <script>if (window.module) module = window.module;</script>
</head>

You can also use this template

Integrate jQuery into a electron app

3 Answers3

Linked