Best IT Recipes

Unused error: cannot find jquery module '

I am using Electron to create a desktop application. In my application, I load an external site (outside the Atom application), say, the http: //mydummysite/index.html page.

Here is the structure of my application in the Atom editor :

enter image description here

that is, it has the following parts:

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

Source:

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 launch the above application (by dragging and dropping the application folder into Electron), the external page ( http: //mydummysite/index.html ) is loaded into the Electron shell. but with an error

Uncaught Error: cannot find module 'jquery'

enter image description here

Can you help me find the cause of this problem?

As you can see in my screenshot of the directory structure, I already installed the jquery module in my folder and did this with the npm install jquery command.

Note. To play with the require command in JS, I tried adding require("ipc") to the http: //mydummysite/index.html page of the external page, and it worked, which could be the reason with require("jquery") .

Have I added the external module (jquery) to Electron correctly?

Am I missing some kind of dependency in package.json ?

What I already tried:

  • npm cache clean , npm install jquery (to my application 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 a screenshot of the location from which an error is issued in module.js

enter image description here

Can someone tell require("ipc") why require("ipc") works, but require("jquery") does not?

My goal is to use jQuery with an electronic application with a node integration version.

+53
javascript jquery atom-editor electron
Aug 28 '15 at 7:21
source share
6 answers

TL; dr

Unlike a regular nodejs application, where you have access to global modules (for example, located in /usr/bin/node ), the electron does not automatically set the NODE_PATH environment NODE_PATH . You must install it manually on all paths containing the modules you need.



Update:

Answer to the question

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

can be found in this release that system / user modules should not be included in the global module path

since they may contain modules not supplied with the application and possibly compiled with invalid v8 headers.

And if you look at the source of the electrons , you will see that the internal modules are added to module.globalPaths :

 # Add common/api/lib to module search paths. globalPaths.push path.resolve(__dirname, '..', 'api', 'lib')

that is why you have access to ipc , app , etc., but not to the modules that you installed globally with npm install -g .



I just tried this with the latest version of electron-prebuilt with a local server serving the exact same HTML file that you provided, and I think I know what the problem is: if you do not add the path to your node_modules application node_modules in your root directory Applications with the variable NODE_PATH will not work. So you need to do something like this:

 export NODE_PATH=/PATH/TO/APP/node_modules electron /PATH/TO/APP

When exporting NODE_PATH make sure you specify the absolute path.



Update 2:

Reply to comment:

I get jQuery errors not found

Must be found on this ticket . Basically, if you use the jQuery npm package or do something like the following in your HTML files inside Electron:

 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

What you get is a factory, not an actual jQuery object attached to a global context (e.g. window ). As I mentioned in the previous answer (also containing jQuery source code)

When you need jQuery inside CommonJS or a similar environment that provides module and module.exports , you get a factory, not a real jQuery object.

Now, to use this factory (either by importing code from a CDN, or if you have the npm module locally available), you need something like the following:

 <script> window.jQuery = window.$ = require('jquery'); </script>


I wrote an article that explains the combination of Node + jQuery.

+39
01 Sep '15 at 15:47
source share

Installing jquery with npm is not enough:

 npm install --save jquery

It restores jQuery source files in your project. But you have to include the script in your html file:

 <!DOCTYPE html> <html> <head></head> <body> <h1>Hello World!</h1> </body> <!-- Try to load from cdn to exclude path issues. --> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script> window.jQuery = window.$ = jQuery; $(document).ready(function() { console.log( "jQuery is loaded" ); }); </script> </html>
+7
Aug 28 '15 at 8:42
source share

I have the same problem when using jQuery with electron, and figure out a solution for this case:

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

Source: https://discuss.atom.io/t/electron-app-to-host-external-site/16390/9

+3
Mar 24 '16 at 6:07
source share
 # assuming you have installed jquery locally instead of globally like in as npm install jquery -s # without -g flag

instead of required ( "jquery" ) , specify the relative path from the source directory
requires ( ". /node_modules/jquery/dist/jquery.min.js" );

Try the following:

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

OR

 <script>var $ = jQuery = require('./node_modules/jquery/dist/jquery.min.js');</script>
+3
Jul 19 '16 at 0:57
source share

Hope the link below illuminates your doubts about

why do require ("ipc") work and require ("jquery") not?

https://github.com/atom/electron/issues/254

https://discuss.atom.io/t/electron-app-to-host-external-site/16390/7

+2
Aug 31 '15 at 12:54
source share

The same thing happened to me, a simple solution is to add this to your index.js file:

 app.on('ready', function() { var mainWindow = new BrowserWindow({ "node-integration": false }) //rest of your initialization code here. })

the problem is caused by node, refer to this post for more information

Setting node integration to false will disable node.js in the renderer process - that is, your application can only do what the web browser does.

0
Sep 05 '15 at 19:42
source share


More articles:


All Articles