New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
luto opened this Issue May 6, 2014 · 69 comments

Comments

Projects
None yet
@luto

luto commented May 6, 2014

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 comment has been minimized.

Show comment
Hide comment
@Twipped

Twipped May 6, 2014

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 commented May 6, 2014

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 zcbenz added the wontfix label May 7, 2014

@zcbenz

This comment has been minimized.

Show comment
Hide comment
@zcbenz

zcbenz May 7, 2014

Contributor

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

Contributor

zcbenz commented May 7, 2014

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

@alexdong

This comment has been minimized.

Show comment
Hide comment
@alexdong

alexdong Jun 7, 2014

@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 commented Jun 7, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@Tribex

Tribex Jun 7, 2014

Contributor

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

Contributor

Tribex commented Jun 7, 2014

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

kurtharriger added a commit to kurtharriger/gorilla-web that referenced this issue Aug 31, 2014

require jQuery fix for atom-shell
Atom shell appears to blow up when jquery is added as script tag.
electron/electron#254

Use commonjs syntax to export to window
@mpcode

This comment has been minimized.

Show comment
Hide comment
@mpcode

mpcode Sep 28, 2014

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 commented Sep 28, 2014

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

This comment has been minimized.

Show comment
Hide comment
@frankhale

frankhale Sep 28, 2014

Contributor

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

frankhale commented Sep 28, 2014

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

This comment has been minimized.

Show comment
Hide comment
@mpcode

mpcode Sep 28, 2014

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

mpcode commented Sep 28, 2014

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

@frankhale

This comment has been minimized.

Show comment
Hide comment
@frankhale

frankhale Sep 28, 2014

Contributor

Awesome! The path thing tripped me up as well.

Contributor

frankhale commented Sep 28, 2014

Awesome! The path thing tripped me up as well.

cobalamin added a commit to cobalamin/dripdownode that referenced this issue Oct 5, 2014

Add loading message to spinner overlay.
Stop depending on jQuery and Vex, because electron/electron#254
is just ridiculous when loading non-file resources (__dirname is not set properly and process.cwd() is not usable)
@kabalage

This comment has been minimized.

Show comment
Hide comment
@kabalage

kabalage Mar 17, 2015

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 commented Mar 17, 2015

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

This comment has been minimized.

Show comment
Hide comment
@miguelmota

miguelmota Apr 27, 2015

@kabalage worked wonderfully, thanks!

miguelmota commented Apr 27, 2015

@kabalage worked wonderfully, thanks!

@vrunoa

This comment has been minimized.

Show comment
Hide comment
@vrunoa

vrunoa commented May 6, 2015

👍

@RamonGebben

This comment has been minimized.

Show comment
Hide comment
@RamonGebben

RamonGebben May 15, 2015

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

RamonGebben commented May 15, 2015

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

@skandasoft

This comment has been minimized.

Show comment
Hide comment
@skandasoft

skandasoft May 18, 2015

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

skandasoft commented May 18, 2015

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

@dleroux

This comment has been minimized.

Show comment
Hide comment
@dleroux

dleroux May 21, 2015

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 commented May 21, 2015

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

This comment has been minimized.

Show comment
Hide comment
@RamonGebben

RamonGebben May 22, 2015

@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 commented May 22, 2015

@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 ]);

devartblake added a commit to devartblake/Project_Hathor that referenced this issue Jun 29, 2015

Error fixes
Fixed an error with jQuery not running properly with Twitter bootstrap
and the Electron framework.
Reference: electron/electron#254
@vikbez

This comment has been minimized.

Show comment
Hide comment
@vikbez

vikbez Jul 16, 2015

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 commented Jul 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@akashnimare

akashnimare Oct 4, 2016

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 -

image

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 commented Oct 4, 2016

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 -

image

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

This comment has been minimized.

Show comment
Hide comment
@akashnimare

akashnimare Oct 4, 2016

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

akashnimare commented Oct 4, 2016

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

@akashnimare

This comment has been minimized.

Show comment
Hide comment
@akashnimare

akashnimare Oct 4, 2016

@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 commented Oct 4, 2016

@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

This comment has been minimized.

Show comment
Hide comment
@lmj0011

lmj0011 Oct 26, 2016

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

lmj0011 commented Oct 26, 2016

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

@Bronts

This comment has been minimized.

Show comment
Hide comment
@Bronts

Bronts Oct 28, 2016

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 commented Oct 28, 2016

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

This comment has been minimized.

Show comment
Hide comment
@drowlands

drowlands Nov 2, 2016

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 commented Nov 2, 2016

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

This comment has been minimized.

Show comment
Hide comment
@reneroth

reneroth Nov 3, 2016

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

reneroth commented Nov 3, 2016

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

@amhoho

This comment has been minimized.

Show comment
Hide comment
@amhoho

amhoho Jan 13, 2017

<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 commented Jan 13, 2017

<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

This comment has been minimized.

Show comment
Hide comment
@englishextra

englishextra Jan 13, 2017

@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 commented Jan 13, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@anuxs

anuxs commented Mar 26, 2017

mark

@karlhorky

This comment has been minimized.

Show comment
Hide comment
@karlhorky

karlhorky Apr 5, 2017

@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 commented Apr 5, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@souzace

souzace May 12, 2018

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 commented May 12, 2018

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment