Electron jQuery is not defined

Question

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    lt body gt   lt p id  click-me  gt Click me  lt  p gt       lt script src  node modules jquery dist jquery min js  gt  lt  script gt    jQuery should be loaded now  lt script gt     click-me   click      gt   alert  Clicked      lt  script gt   lt  body gt    Running this code above wouldn t work  In fact  open up DevTools  go to the Console view  and click on the  lt p gt  element  You should see that function   is not defined or something to that effect

User · Answer

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');

User · Answer

As seen in https   github com atom electron issues 254 the problem is caused because of this code   if   typeof module      object   amp  amp  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  lt script src       gt   you should load like this    lt script gt window     window jQuery   require    path to jquery    lt  script gt    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

User · Answer

im building and Angular App with electron  my solution was the following      index html    lt script gt      if   typeof module      object   amp  amp  typeof module exports      object            window     window jQuery   require  jquery           lt  script gt       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    lt script src  path to jquery  gt  lt  script gt   lt script gt      if   typeof module      object   amp  amp  typeof module exports      object            window     window jQuery   require  jquery           lt  script gt

User · Answer

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     lt head gt    lt script gt   window nodeRequire   require   delete window require  delete window exports  delete window module    lt  script gt    lt script type  text javascript  src  jquery js  gt  lt  script gt    lt  head gt

User · Answer

lt script gt    delete window module   lt  script gt    before your jquery import and you re good to go  more info here

User · Answer

This works for me    lt script languange  JavaScript  gt       if  typeof module      object    window module   module  module   undefined    lt  script gt    Things to consider   1  Put this in  section right before  lt  head gt   2  Include Jquery min js or Jquery js right before the  lt  body gt  tag

User · Answer

worked for me using the following code   var     require  jquery

User · Answer

A better and more generic solution IMO              lt  -- Insert this line above script imports  -- gt   lt script gt if  typeof module      object    window module   module  module   undefined   lt  script gt    lt  -- normal script imports etc  -- gt   lt script src  scripts jquery min js  gt  lt  script gt       lt script src  scripts vendor js  gt  lt  script gt        lt  -- Insert this line after script imports -- gt   lt script gt if  window module  module   window module  lt  script gt    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

User · Answer

Another way of writing  lt script gt window     window jQuery   require    path to jquery    lt  script gt  is      lt script src    path to jquery  onload  window     window jQuery   module exports   gt  lt  script gt

User · Answer

You can put node-integration  false inside options on BrowserWindow   eg  window   new BrowserWindow   node-integration   false

User · Answer

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

User · Answer

If you are using Angular2 you can create a new js file with this code      jquery-electron js  if    window jQuery     window     amp  amp     module  amp  amp    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

User · Answer

1 Install jQuery using npm    npm install jquery --save   2    lt  --firstly try to load jquery as browser-- gt   lt script src    jquery-3 3 1 min js  gt  lt  script gt   lt  --if first not work  load using require  -- gt   lt script gt    if  typeof jQuery     undefined   window     window jQuery   require  jquery      lt  script gt

User · Answer

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   lt  -- Insert this line above local script tags  -- gt   lt script gt if  typeof module      object    window module   module  module    undefined   lt  script gt    lt  -- normal script imports etc  -- gt   lt script   src  https   code jquery com jquery-3 4 1 min js    integrity  sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo     crossorigin  anonymous  gt  lt  script gt        lt  -- Insert this line after script tags -- gt   lt script gt if  window module  module   window module  lt  script gt    After importing like given  you will be able to use the JQuery and other things in electron

User · Answer

A nice and clean solution   Install jQuery using npm   npm install jquery --save  Use it   lt script gt  let     require  jquery    lt  script gt

User · Answer

Just came across this same problem  npm install jquery --save   lt script gt window     window jQuery   require  jquery    lt  script gt   worked for me

User · Answer

you may try the following code   mainWindow   new BrowserWindow           webPreferences                nodeIntegration false

User · Answer

ok  here s another option  if you want a relative include      lt script gt  window     window jQuery   require    assets scripts jquery-3 2 1 min js    lt  script gt

User · Answer

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

[jquery] Electron: jQuery is not defined

Examples related to jquery

Examples related to electron