Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 641
Bruno Vaz Avatar asked Sep 17 '15 03:09

Bruno Vaz


People also ask

Can we use jQuery in Electron?

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. Running this code above wouldn't work.

Can I use bootstrap with Electron?

One of the best front-end frameworks in the web world in twitter bootstrap. As electron is relies on web browser, we can easily use bootstrap with electron in order to use the power of bootstrap in our electron framework. The latest version of bootstrap as of today is 3.3.

What is Electron Nodeintegration?

Electron node integration refers to the ability of accessing Node. js resources from within the “renderer” thread (the UI). It is enabled by default in Quasar CLI, although Electron is encouraging developers to turn it off as a security precaution.


2 Answers

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

like image 140
Dale Avatar answered Sep 19 '22 11:09

Dale


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.

like image 42
Bruno Vaz Avatar answered Sep 19 '22 11:09

Bruno Vaz