Uncaught Error: Cannot find module 'jquery'


#1

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:

enter image description here

i.e it is having following parts:

  1. main.js
  2. package.json
  3. 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

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 https://github.com/atom/electron/issues/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?

I have even tried this:

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');
   module.paths.push(__dirname+'/node_modules');
   require('jquery');
</script>
</html>

I am still getting the same error: “Uncaught Error: Cannot find module ‘jquery’”


#2

Just do…

<script>window.$ = window.jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>

#4

change ‘node-integration’:true to ‘node-integration’:false

This will load the page exactly as you would if you go to the site in a browser