jQuery isn't set globally because "module" is defined

[luto]

jQuery contains something along this lines:

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

module is defined, even in the browser-side scripts. This causes jQuery to ignore the window object and use module, so the other scripts won't find $ nor jQuery in global scope..

I am not sure if this is a jQuery or atom-shell bug, but I wanted to put this on the web, so others won't search as long as I did.

[Twipped]

This isn't really a bug for either system, you have the same problem when using browserify. jQuery sees that its running in a CommonJS environment and expects to be used as such.

The solution is relatively simple, however. Instead of loading jQuery as a script tag, load it via require:

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

[Twipped]

This isn't really a bug for either system, you have the same problem when using browserify. jQuery sees that its running in a CommonJS environment and expects to be used as such.

The solution is relatively simple, however. Instead of loading jQuery as a script tag, load it via require:

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

[zcbenz]

I agree with @ChiperSoft, this is expected behavior in CommonJS environment, so I marked this as wontfix. And thanks for sharing your finding.

[zcbenz]

I agree with @ChiperSoft, this is expected behavior in CommonJS environment, so I marked this as wontfix. And thanks for sharing your finding.

[alexdong]

@ChiperSoft, Where should I put the jquery.js file to get require('jquery') working? I've tried to put it at the same level as package.js and main.js but the runtime doesn't seem to pick it up.

[alexdong]

@ChiperSoft, Where should I put the jquery.js file to get require('jquery') working? I've tried to put it at the same level as package.js and main.js but the runtime doesn't seem to pick it up.

[Tribex]

You can use require('jquery.js') note the .js at the end, to load jquery relative to your HTML file.

[Tribex]

You can use require('jquery.js') note the .js at the end, to load jquery relative to your HTML file.

[mpcode]

Sorry, I used window.$ = window.jQuery = require('/path/to/jquery'); as mentioned but it doesn't work,
Uncaught Error: Cannot find module 'scripts/jquery-1.10.2.min.js' module.js:339

[mpcode]

Sorry, I used window.$ = window.jQuery = require('/path/to/jquery'); as mentioned but it doesn't work,
Uncaught Error: Cannot find module 'scripts/jquery-1.10.2.min.js' module.js:339

[frankhale]

I use that all the time and it works great! Here is what I use, be mindful about the path:

window.$ = window.jQuery = require('./scripts/jquery-2.1.1.min.js');

[frankhale]

I use that all the time and it works great! Here is what I use, be mindful about the path:

window.$ = window.jQuery = require('./scripts/jquery-2.1.1.min.js');

[mpcode]

@frankhale oh, it worked with ./, thanks!

[mpcode]

@frankhale oh, it worked with ./, thanks!

[frankhale]

Awesome! The path thing tripped me up as well.

[frankhale]

Awesome! The path thing tripped me up as well.

[kabalage]

If your app does not need node-integration, add "node-integration": false to your BrowserWindow options. In this case module.exports is not available, jQuery works like expected.

[kabalage]

If your app does not need node-integration, add "node-integration": false to your BrowserWindow options. In this case module.exports is not available, jQuery works like expected.

[miguelmota]

@kabalage worked wonderfully, thanks!

[miguelmota]

@kabalage worked wonderfully, thanks!

[vrunoa]

👍

[vrunoa]

👍

[RamonGebben]

Walked up to the same issue. Install jQuery via NPM then required it and it worked.

[RamonGebben]

Walked up to the same issue. Install jQuery via NPM then required it and it worked.

[skandasoft]

what if node integeration and jquery without the require is needed...

[skandasoft]

what if node integeration and jquery without the require is needed...

[dleroux]

I'm trying to make sense of this since it appears to be something I could use. However I wonder when can you be sure you can safely use $. Logging $ right after this line will result would be require and not jquery since require is asynchronus?

window.$ = window.jQuery = require('/path/to/jquery');
console.log($) // logs 'require' not 'jQuery'

[dleroux]

I'm trying to make sense of this since it appears to be something I could use. However I wonder when can you be sure you can safely use $. Logging $ right after this line will result would be require and not jquery since require is asynchronus?

window.$ = window.jQuery = require('/path/to/jquery');
console.log($) // logs 'require' not 'jQuery'

[RamonGebben]

@dieroux try installing it via npm:

npm install jquery

This worked for me while trying the same. Then you don't need to give a path, you just say:

window.$ = window.jQuery = require('jquery');
console.log( [$, jQuery ]);

[RamonGebben]

@dieroux try installing it via npm:

npm install jquery

This worked for me while trying the same. Then you don't need to give a path, you just say:

window.$ = window.jQuery = require('jquery');
console.log( [$, jQuery ]);

[vikbez]

What if we need node-integration, and we can't use require('something') ?
Currently it works by doing "delete module;" before loading problematic-stuff.
What's the impact of doing this ?

[vikbez]

What if we need node-integration, and we can't use require('something') ?
Currently it works by doing "delete module;" before loading problematic-stuff.
What's the impact of doing this ?

[akashnimare]

For some reason I'm still not able to make jQuery work both in browser and in Electron app.
My web app works fine in browser whereas when I try to load the same url via electron app it throws -

Webapp - https://github.com/zulip/zulip
Electron app - https://github.com/zulip/zulip-electron

The webapp is using jquery 1.12.1 version via npm.
I can't use nodeintegration off because I need it in my renderer process.
I'm having hard time solving this . Does anyone know how to make it work?
cc @aaaaahaaaaa @maykefreitas @paulcbetts @tomkel @dkfiresky

[akashnimare]

For some reason I'm still not able to make jQuery work both in browser and in Electron app.
My web app works fine in browser whereas when I try to load the same url via electron app it throws -

Webapp - https://github.com/zulip/zulip
Electron app - https://github.com/zulip/zulip-electron

The webapp is using jquery 1.12.1 version via npm.
I can't use nodeintegration off because I need it in my renderer process.
I'm having hard time solving this . Does anyone know how to make it work?
cc @aaaaahaaaaa @maykefreitas @paulcbetts @tomkel @dkfiresky

[akashnimare]

@englishextra no luck. I tried to include your code into my app's preload.js but getting same error.

[akashnimare]

@englishextra no luck. I tried to include your code into my app's preload.js but getting same error.

[akashnimare]

@englishextra No, I don't need jquery in my app. See the update code here. I can't include your code into my app logic since I'm using it only for loading the specified url see this.

[akashnimare]

@englishextra No, I don't need jquery in my app. See the update code here. I can't include your code into my app logic since I'm using it only for loading the specified url see this.

[lmj0011]

for those using the Aurelia framework:
aurelia/skeleton-navigation@6292e69

[lmj0011]

for those using the Aurelia framework:
aurelia/skeleton-navigation@6292e69

[Bronts]

I resolved this problem with this

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery;"></script>

and set

webPreferences: {
            nodeIntegration: false, 
        }

if you with nodeIntegration: true, imorot jQuery like this

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

reference to
#345

[Bronts]

I resolved this problem with this

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery;"></script>

and set

webPreferences: {
            nodeIntegration: false, 
        }

if you with nodeIntegration: true, imorot jQuery like this

<script type="text/javascript" src="js/jquery.min.js" onload="window.$ = window.jQuery = module.exports;"></script>

reference to
#345

[drowlands]

I mean, it seems to be a bad problem, so why not include it in actual Electron? Maybe integrate major JavaScript libraries into Electron?

[drowlands]

I mean, it seems to be a bad problem, so why not include it in actual Electron? Maybe integrate major JavaScript libraries into Electron?

[reneroth]

Chances are, if you are using jQuery in an Electron App, you are doing something very wrong or at least inefficient.

[reneroth]

Chances are, if you are using jQuery in an Electron App, you are doing something very wrong or at least inefficient.

[amhoho]

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

[amhoho]

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

[englishextra]

@drowlands Including 3party libs in Electron seems to be a bad idea. Imagine the update routine, for instance, or chosing a version.
@amhoho That's because you need to require jQuery, or modify its init code at the top function - leaving only factory( global );

Here:

( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

I my case I load libs via fetch/Promise or xhr, so I have this routine to remove module checks in vendors' libs.
@RRorg weird what you're saying

[englishextra]

@drowlands Including 3party libs in Electron seems to be a bad idea. Imagine the update routine, for instance, or chosing a version.
@amhoho That's because you need to require jQuery, or modify its init code at the top function - leaving only factory( global );

Here:

( function( global, factory ) {

	"use strict";

	if ( typeof module === "object" && typeof module.exports === "object" ) {

		// For CommonJS and CommonJS-like environments where a proper `window`
		// is present, execute the factory and get jQuery.
		// For environments that do not have a `window` with a `document`
		// (such as Node.js), expose a factory as module.exports.
		// This accentuates the need for the creation of a real `window`.
		// e.g. var jQuery = require("jquery")(window);
		// See ticket #14549 for more info.
		module.exports = global.document ?
			factory( global, true ) :
			function( w ) {
				if ( !w.document ) {
					throw new Error( "jQuery requires a window with a document" );
				}
				return factory( w );
			};
	} else {
		factory( global );
	}

I my case I load libs via fetch/Promise or xhr, so I have this routine to remove module checks in vendors' libs.
@RRorg weird what you're saying

[anuxs]

mark

[anuxs]

mark

[karlhorky]

@kabalage I think the configuration in your post above is out of date. It looks like it should be like this now:

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

[karlhorky]

@kabalage I think the configuration in your post above is out of date. It looks like it should be like this now:

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

[souzace]

On official docs:
https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

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

[souzace]

On official docs:
https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

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