Skip to content
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

luto opened this issue May 6, 2014 · 71 comments

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

luto opened this issue May 6, 2014 · 71 comments


Copy link

@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.

Copy link

@Twipped 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
Copy link

@zcbenz 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.

Copy link

@alexdong 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.

Copy link

@JoshTheDerf JoshTheDerf 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
Atom shell appears to blow up when jquery is added as script tag.

Use commonjs syntax to export to window
Copy link

@mpcode 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

Copy link

@frankhale 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');
Copy link

@mpcode mpcode commented Sep 28, 2014

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

Copy link

@frankhale 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
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)
Copy link

@kabalage 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.

Copy link

@miguelmota miguelmota commented Apr 27, 2015

@kabalage worked wonderfully, thanks!

Copy link

@vrunoa vrunoa commented May 6, 2015


Copy link

@RamonGebben RamonGebben commented May 15, 2015

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

Copy link

@skandasoft skandasoft commented May 18, 2015

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

Copy link

@dleroux 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'

Copy link

@RamonGebben 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
Fixed an error with jQuery not running properly with Twitter bootstrap
and the Electron framework.
Reference: electron/electron#254
Copy link

@vikbez 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 ?

Copy link

@akashnimare 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 -


Webapp -
Electron app -

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

Copy link

@akashnimare akashnimare commented Oct 4, 2016

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

Copy link

@akashnimare 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.

Copy link

@lmj0011 lmj0011 commented Oct 26, 2016

for those using the Aurelia framework:

Copy link

@Bronts 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

Copy link

@drowlands 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?

Copy link

@reneroth 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.

Copy link

@amhoho amhoho commented Jan 13, 2017

<script src=""></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>
Copy link

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


( 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

Copy link

@anuxs anuxs commented Mar 26, 2017


Copy link

@karlhorky 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, 
Copy link

@souzace souzace commented May 12, 2018

On official docs:

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

@alotex alotex commented Feb 21, 2019

I'm getting
TypeError: Cannot read property 'createElement' of undefined
in webview.

preload script is

const path = require('path');
const {ipcRenderer} = require('electron')
const fs = require('fs');
window.$ = window.jQuery = require(path.join(__dirname, '../jquery.min.js'))
Copy link

@omprabhakaran omprabhakaran commented Sep 12, 2019

if i use this code, it works fine,
but can't able to close the browserwindow by click of top right button.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet