Uncaught Error: Cannot find module 'jquery' #2631

raghav-axero · 2015-08-28T15:29:17Z

I am using Electron to make a desktop app. In my app I am loading a an external site (outside Atom app) lets say http://mydummysite/index.html page.

Here is the structure of my app in Atom Editor:

i.e it is having following parts:

main.js
package.json
nodemodules>jquery (to load jquery)

Source code:

main.js:

   'use strict';

    var app = require('app');

    app.on('ready', function() {
      var BrowserWindow = require('browser-window');

      var win = 
      new BrowserWindow({ width: 800, height: 600, show: false, 
               'node-integration':true });
      win.on('closed', function() {
        win = null;
      });

      win.loadUrl('http://mydummysite/index.html ');
      win.show();
    });

package.json:

{
  "name": "my-mac-app",
  "version": "5.2.0",
  "description": "My Mac Desktop App",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "Me",
  "license": "ISC",
  "dependencies": {
    "jquery": "^2.1.4"
  }
}

External page - http://mydummysite/index.html page code:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>

  </body>
<script>

   var jqr=require('jquery');

</script>
</html>

When I run the above app (by dragging the application folder to Electron) the external page (http://mydummysite/index.html) loads in Electron shell
but with the error "Uncaught Error: Cannot find module 'jquery'"

Can you help me finding the cause of this issue?

As you can see in my screenshot of directory structure I have alread installed jquery module to my folder and I did it via "npm install jquery" command.

Note: To play with "require" command in JS I tried adding "require("ipc")" in my external page http://mydummysite/index.html page and it was working so what could be the reason with require("jquery").

Did I add external module (jquery) in correct way in Electron?

Am I missing some dependency in package.json?

What I have already tried:

npm cache clean, npm install jquery (to my app folder)
npm install --save jquery
npm install jquery -g
npm rebuild
sudo npm install jquery -g
sudo npm install jquery
export NODE_PATH=/usr/local/lib/node_modules

Here is the screenshot of the location from where the error is thrown in module.js

Can someone suggest why require("ipc") is working and require("jquery") not?

How should I load jQuery in my external site?

If I use script src="jquery.js" in external site it results to "Uncaught ReferenceError: jQuery is not defined". I need to use jQuery library in my external site. I have lot of code dependent on jQuery.

I tried this too

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

in my external site as mentioned here #345

It did add the jQuery object but with the value of module.exports.

What about the core jQuery file code?

I can't access any functions which jQuery exposes after that like jQuery.fn etc

Can anyone suggest any solution for adding jQuery.js on an external site loaded in Electron?

The text was updated successfully, but these errors were encountered:

cmplx · 2015-08-28T22:33:22Z

try downloading site via tag webview, which has the attribute of preload, which allows you to load the jquery.js, before loading the page

zcbenz · 2015-08-29T08:47:40Z

Please see my comment in #2539 (comment).

raghav-axero · 2015-08-29T11:14:16Z

Hi @zcbenz,

Do I need to add
"require('jquery').globalPaths.push(__dirname + '/node_modules');"

in place of "require('jquery');" at http://mydummysite/index.html or should I add

"require('jquery').globalPaths.push(__dirname + '/node_modules');" at main.js in Electron app?

zcbenz · 2015-08-31T01:51:07Z

You should either add it in your html page or in the preload script, also as one comment in that issue said, using module.paths.push(__dirname+'/node_modules'); is a better choice.

raghav-axero · 2015-08-31T10:40:01Z

I used the following code "require('jquery').globalPaths.push(__dirname + '/node_modules');" in my external page at http://mydummysite/index.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello World!</h1>

  </body>
<script>

   require('jquery').globalPaths.push(__dirname + '/node_modules');

</script>
</html>

I am still getting the same error: "Uncaught Error: Cannot find module 'jquery'"

zcbenz · 2015-09-01T07:53:52Z

You should use module.paths.push(__dirname+'/node_modules'); instead of require('jquery').globalPaths.push(__dirname + '/node_modules');.

raghav-axero · 2015-09-01T08:36:01Z

Hi @zcbenz .

I have started the post in the forums as you suggested. https://discuss.atom.io/t/uncaught-error-cannot-find-module-jquery/20429

I tried

module.paths.push(__dirname+'/node_modules');
require('jquery');

Still getting the same error.

zcbenz · 2015-09-01T08:45:41Z

Whether it works depends on the location of your preload script, the pass you passed to module.paths.push has to be the folder that include jQuery, you can print the value of __dirname and debug yourself.

raghav-axero · 2015-09-01T08:52:22Z

__dirname in my console shows
"/Applications/Electron.app/Contents/Resources/atom.asar/renderer/lib"
so the __dirname + '/node_modules' will be
"/Applications/Electron.app/Contents/Resources/atom.asar/renderer/lib/node_modules".

I have a jquery folder under node_modules folder inside my app

Here is the structure of my app in Atom Editor

Doesn't "/Applications/Electron.app/Contents/Resources/atom.asar/renderer/lib/node_modules". path represent my app's node_module folder?

zcbenz · 2015-09-01T08:54:52Z

__dirname is different in different scripts: https://nodejs.org/api/globals.html#globals_dirname.

raghav-axero · 2015-09-01T09:33:18Z

Unfortunately after reading that I still have doubt.

What should be the be the path I used to load jQuery? Can you let me know wrt to path structure I shared.

RohanMohite · 2017-12-02T00:45:54Z

Below solution worked for me.

Installing jquery in npm package to your local machine, type the below into your command line. You’ll notice a node_modules directory appear in your root where the package is now installed.

npm install jquery

And then add below line in your html file.

Developing43 · 2020-04-21T20:52:11Z

@RohanMohite Thanks I was having the same issue and the npm install jquery worked!

zcbenz closed this as completed Aug 29, 2015

raghav-axero mentioned this issue Sep 1, 2015

Uncaught Error: Cannot find module 'jquery' #2674

Closed

andrewjaykeller mentioned this issue Jan 14, 2016

Modules not importing properly openexp/openexp#50

Closed

michaelkulbacki mentioned this issue Oct 18, 2016

Fix jQuery Module Issue in Electron john494/SmartMirror#29

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uncaught Error: Cannot find module 'jquery' #2631

Uncaught Error: Cannot find module 'jquery' #2631

raghav-axero commented Aug 28, 2015

cmplx commented Aug 28, 2015

zcbenz commented Aug 29, 2015

raghav-axero commented Aug 29, 2015

zcbenz commented Aug 31, 2015

raghav-axero commented Aug 31, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

RohanMohite commented Dec 2, 2017

Developing43 commented Apr 21, 2020

Uncaught Error: Cannot find module 'jquery' #2631

Uncaught Error: Cannot find module 'jquery' #2631

Comments

raghav-axero commented Aug 28, 2015

cmplx commented Aug 28, 2015

zcbenz commented Aug 29, 2015

raghav-axero commented Aug 29, 2015

zcbenz commented Aug 31, 2015

raghav-axero commented Aug 31, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

zcbenz commented Sep 1, 2015

raghav-axero commented Sep 1, 2015

RohanMohite commented Dec 2, 2017

Developing43 commented Apr 21, 2020