未捕获的错误：找不到模块“jquery”

Question

I am using Electron to make a desktop app.我正在使用Electron制作桌面应用程序。 In my app I am loading a an external site (outside Atom app) lets say http://mydummysite/index.html page.在我的应用程序中，我正在加载一个外部站点（在 Atom 应用程序之外）可以说http://mydummysite/index.html页面。

Here is the structure of my app in Atom Editor :这是Atom Editor中我的应用程序的结构：

ie it is having following parts:即它有以下部分：

main.js
package.json
nodemodules>jquery (to load jquery) nodemodules>jquery （加载jquery）

Source code:源代码：

main.js:主要.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:包.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:外部页面 - http://mydummysite/index.html页面代码：

<!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当我运行上面的应用程序（通过将应用程序文件夹拖到 Electron）时，外部页面（ http://mydummysite/index.html ）在 Electron shell 中加载，但出现错误

Uncaught Error: Cannot find module 'jquery'未捕获的错误：找不到模块“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.正如你在我的目录结构截图中看到的，我已经将 jquery 模块安装到我的文件夹中，我是通过npm install jquery命令完成的。

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") .注意：为了在 JS 中使用require命令，我尝试在我的外部页面http://mydummysite/index.html页面中添加require("ipc")并且它正在工作，所以require("jquery")的原因可能是什么。

Did I add external module (jquery) in correct way in Electron?我是否在 Electron 中以正确的方式添加了外部模块 (jquery)？

Am I missing some dependency in package.json ?我是否缺少package.json一些依赖项？

What I have already tried:我已经尝试过的：

npm cache clean , npm install jquery (to my app folder) npm cache clean ， npm install jquery （到我的应用程序文件夹）
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这是在module.js抛出错误的位置的屏幕截图

Can someone suggest why require("ipc") is working and require("jquery") not?有人可以建议为什么require("ipc")可以工作而require("jquery")不行吗？

My goal is to use jQuery with electron app with node-integration true.我的目标是将 jQuery 与电子应用程序一起使用，节点集成为 true。

Answer 1

tl;dr tl;博士

In contrast to a normal nodejs app, where you have access to global modules (eg located in /usr/bin/node ), electron doesn't automatically set the NODE_PATH environment variables.与普通的 nodejs 应用程序相比，您可以访问全局模块（例如位于/usr/bin/node ），电子不会自动设置NODE_PATH环境变量。 You have to set it manually to all the paths containing your desired modules.您必须手动将其设置为包含所需模块的所有路径。

Update:更新：

The answer to the question问题的答案

why require("ipc") is working and require("jquery") not?为什么require("ipc")有效而require("jquery")无效？

is to be found in this issue , stating that system/user modules should not be included in the global path of the module将在此问题中找到，指出系统/用户模块不应包含在模块的全局路径中

since they could contain modules not shipped with the app and possibly compiled with the wrong v8 headers.因为它们可能包含应用程序未附带的模块，并且可能使用错误的 v8 头文件编译。

And if you take a look at electron's source you can see that internal modules are added to the module.globalPaths :如果您查看电子的源代码，您可以看到内部模块已添加到module.globalPaths ：

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

thats why you have access to ipc , app , etc. but not the modules that you have installed globally using npm install -g .这就是为什么您可以访问ipc 、 app等，但不能访问您使用npm install -g全局npm install -g的模块。

I just tried it out with the latest electron-prebuilt version with a local server serving exactly the same HTML file that you provided and I think I know what the problem is: If you don't append the path to your app node_modules directory under your app root to the NODE_PATH variable it is not going to work.我只是用最新的electron-prebuilt版本尝试了它，本地服务器提供与您提供的完全相同的 HTML 文件，我想我知道问题是什么：如果您没有将路径附加到您的应用程序node_modules目录下app root 到NODE_PATH变量它不会工作。 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 that you provide an absolute path.导出NODE_PATH ，请确保提供绝对路径。

**Update 2:** **更新 2：**

The answer to the comment:评论的答案：

I get jQuery not found errors我得到 jQuery not found 错误

Is to be found in this ticket .是在这张票中找到的。 Basically if you use the jQuery's npm package or do something like the following in your HTML files inside electron:基本上，如果您使用 jQuery 的 npm 包或在电子内部的 HTML 文件中执行以下操作：

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

What you get is a factory and not the actual jQuery object attached to the global context (eg window ).你得到的是一个工厂，而不是附加到全局上下文（例如window ）的实际 jQuery 对象。 As I mentioned in a previous answer (containing also jQuery's source code)正如我在之前的回答中提到的（还包含 jQuery 的源代码）

When you require jQuery inside a CommonJS or similar environment which provides module and module.exports , what you get is a factory and not the actual jQuery object.当您在 CommonJS 或提供module和module.exports类似环境中需要 jQuery 时，您得到的是工厂而不是实际的 jQuery 对象。

Now to use that factory (either by importing the code from the CDN or if you have the npm module available locally) you would need something as the following:现在要使用该工厂（通过从 CDN 导入代码，或者如果您有本地可用的 npm 模块），您需要如下内容：

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

I have written an article that explains the combination of Node + jQuery.我写过一篇文章，解释了 Node + jQuery 的组合。

Answer 2

Install jquery with npm isn't enough :使用 npm 安装 jquery 是不够的：

npm install --save jquery

It recovers the source files of jQuery in your project.它会恢复您项目中的 jQuery 源文件。 But you have to include the script in your html file :但是你必须在你的 html 文件中包含脚本：

<!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>

Answer 3

I have the same issue when using jQuery with electron, and find out a solution for these case:我在将 jQuery 与电子一起使用时遇到了同样的问题，并为这些情况找到了解决方案：

<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来源： https : //discuss.atom.io/t/electron-app-to-host-external-site/16390/9

Answer 4

# assuming you have installed jquery locally instead of globally like in as
npm install jquery -s         # without -g flag

instead of require( "jquery" ) , give relative path from source directory而不是require( "jquery" ) ，从源目录给出相对路径
require( "./node_modules/jquery/dist/jquery.min.js" );要求（ “./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>

Answer 5

I hope below link will put some light on your doubt for我希望下面的链接可以解决您的疑问

why require("ipc") is working and require("jquery") not?为什么 require("ipc") 有效而 require("jquery") 无效？

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

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

Answer 6

The same issue happened to me , a simple solution is to add this to your index.js file :同样的问题发生在我身上，一个简单的解决方案是将其添加到您的 index.js 文件中：

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

the issue is caused by node , for more information please refer to this post该问题是由节点引起的，有关更多信息，请参阅此帖子

Setting node-integration to false will disable node.js in the renderer process - ie your app can only do what a web browser will do.将 node-integration 设置为 false 将禁用渲染器进程中的 node.js - 即您的应用程序只能执行 Web 浏览器将执行的操作。

未捕获的错误：找不到模块“jquery”

问题描述

6 个解决方案

解决方案1
44 2015-09-01 15:47:02

解决方案2
7 2015-08-28 08:42:28

解决方案3
6 2016-03-24 06:07:12

解决方案4
4 2016-07-19 00:57:20

解决方案5
1 2015-08-31 12:54:52

解决方案6
0 2015-09-05 19:42:00

未捕获的错误：找不到模块“jquery”

问题描述

6 个解决方案

解决方案1 44 2015-09-01 15:47:02

解决方案2 7 2015-08-28 08:42:28

解决方案3 6 2016-03-24 06:07:12

解决方案4 4 2016-07-19 00:57:20

解决方案5 1 2015-08-31 12:54:52

解决方案6 0 2015-09-05 19:42:00

解决方案1
44 2015-09-01 15:47:02

解决方案2
7 2015-08-28 08:42:28

解决方案3
6 2016-03-24 06:07:12

解决方案4
4 2016-07-19 00:57:20

解决方案5
1 2015-08-31 12:54:52

解决方案6
0 2015-09-05 19:42:00