CODEWITHSUNDEEP
jqueryelectron
Bruno Vaz
Bruno Vaz

Reputation: 5025

Electron: jQuery is not defined

Problem: while developing using Electron, when you try to use any JS plugin that requires jQuery, the plugin doesn't find jQuery, even if you load in the correct path using script tags.

For example,

<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>

Running this code above wouldn't work. In fact, open up DevTools, go to the Console view, and click on the <p> element. You should see that function $ is not defined or something to that effect.

Upvotes: 354

Views: 169203

Answers (21)

Syamdas
Syamdas

Reputation: 21

Install jquery using yarn

yarn add jquery

Upvotes: 0

michael_vons
michael_vons

Reputation: 1060

Well in 2022. This worked for me.

Install JQuery

npm install jquery --save

Use the script tag to add jquery to your index.html file. The src should be the path to jquery in your node_modules folder

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>

Now JQuery would be available/defined as $ in your renderer process (renderer.js file)

Upvotes: 1

Milan Hirpara
Milan Hirpara

Reputation: 166

Just install Jquery with following command.

npm install --save jquery

After that Please put belew line in js file which you want to use Jquery

let $ = require('jquery')

Upvotes: 5

Kiran Maniya
Kiran Maniya

Reputation: 9009

For this issue, Use JQuery and other js same as you are using in Web Page. However, Electron has node integration so it will not find your js objects. You have to set module = undefined until your js objects are loaded properly. See below example

<!-- Insert this line above local script tags  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

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

After importing like given, you will be able to use the JQuery and other things in electron.

Upvotes: 1

shuoGG
shuoGG

Reputation: 19

you may try the following code:

mainWindow = new BrowserWindow({
        webPreferences: {
            nodeIntegration:false,
        }
});

Upvotes: 0

Abraham
Abraham

Reputation: 9885

I face the same issue and this worked for me!

Install jQuery using npm

$ npm install jquery

Then include jQuery in one of the following ways.

Using script tag

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

Using Babel

import $ from 'jquery';

Using Webpack

const $ = require('jquery');

Upvotes: 12

Dale
Dale

Reputation: 8962

A better and more generic solution IMO: 

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

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

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

Benefits

  • Works for both browser and electron with the same code
  • Fixes issues for ALL 3rd-party libraries (not just jQuery) without having to specify each one
  • Script Build / Pack Friendly (i.e. Grunt / Gulp all scripts into vendor.js)
  • Does NOT require node-integration to be false

source here

Upvotes: 852

Kuza Grave
Kuza Grave

Reputation: 1574

im building and Angular App with electron, my solution was the following:

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

So Jquery gets loaded from angular.json if on browser, else if it is an electron builded app it will require module instead.

If you want to import jquery in index.html instead of importing from angular.json use the following solution:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

Upvotes: 3

Vishal Goyal
Vishal Goyal

Reputation: 55

This works for me.

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

Things to consider:

1) Put this in section right before </head>

2) Include Jquery.min.js or Jquery.js right before the </body> tag

Upvotes: 2

Alexey Kolotsey
Alexey Kolotsey

Reputation: 76

1.Install jQuery using npm. 

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>

Upvotes: 2

Professor
Professor

Reputation: 2154

worked for me using the following code 

var $ = require('jquery')

Upvotes: 2

Max
Max

Reputation: 329

If you are using Angular2 you can create a new js file with this code:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

and put it right after jquery path, in .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]

Upvotes: 3

Sagiv Ofek
Sagiv Ofek

Reputation: 25270

<script>
  delete window.module;
</script>

before your jquery import and you're good to go. more info here.

Upvotes: 6

adgelbfish
adgelbfish

Reputation: 354

A nice and clean solution

  1. Install jQuery using npm. (npm install jquery --save)
  2. Use it: <script> let $ = require("jquery") </script>

Upvotes: 14

aestrro
aestrro

Reputation: 993

ok, here's another option, if you want a relative include...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>

Upvotes: 4

Dhaval Chauhan
Dhaval Chauhan

Reputation: 9513

Just came across this same problem

npm install jquery --save

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

worked for me

Upvotes: 37

Fran6
Fran6

Reputation: 591

electron FAQ answer :

http://electron.atom.io/docs/faq/

I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

To solve this, you can turn off node integration in Electron:

// In the main process. 

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>

Upvotes: 56

Mertcan Diken
Mertcan Diken

Reputation: 15361

I think i understand your struggle i solved it little bit differently.I used script loader for my js file which is including jquery.Script loader takes your js file and attaching it to top of your vendor.js file it did the magic for me.

https://www.npmjs.com/package/script-loader

after installing the script loader add this into your boot or application file.

import 'script!path/your-file.js';

Upvotes: 5

Murilo Feres
Murilo Feres

Reputation: 338

You can put node-integration: false inside options on BrowserWindow.

eg: window = new BrowserWindow({'node-integration': false});

Upvotes: 22

Aaleks
Aaleks

Reputation: 4343

Another way of writing <script>window.$ = window.jQuery = require('./path/to/jquery');</script> is : 

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>

Upvotes: 59

Bruno Vaz
Bruno Vaz

Reputation: 5025

As seen in https://github.com/atom/electron/issues/254 the problem is caused because of this code:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

The jQuery code "sees" that its running in a CommonJS environment and ignores window.

The solution is really easy, instead of loading jQuery through <script src="...">, you should load like this:

<script>window.$ = window.jQuery = require('./path/to/jquery');</script>

Note: the dot before the path is required, since it indicates that it's the current directory. Also, remember to load jQuery before loading any other plugin that depends on it.

Upvotes: 131

Related Questions