Неперехваченная ошибка: не удается найти модуль jquery

Я использую Electron для создания настольного приложения. В своем приложении я загружаю внешний сайт (вне приложения Atom), скажем, http://mydummysite/index.html страница.

Вот структура моего приложения в редакторе Atom:

введите описание изображения здесь

т.е. он состоит из следующих частей:

  1. main.js
  2. package.json
  3. nodemodules>jquery (для загрузки jquery)

Исходный код:

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"
  }
}

Внешняя страница - http://mydummysite/index.html код страницы:

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

  </body>
<script>

   var jqr=require('jquery');

</script>
</html>

Когда я запускаю указанное выше приложение (перетаскивая папку приложения в Electron), внешняя страница (http://mydummysite/index.html) загружается в оболочку Electron, но с ошибкой

Неперехваченная ошибка: не удается найти модуль jquery

введите описание изображения здесь

Можете ли вы помочь мне найти причину этой проблемы?

Как вы можете видеть на моем снимке экрана со структурой каталогов, я уже установил модуль jquery в свою папку и сделал это с помощью команды npm install jquery.

Примечание. Чтобы поиграть с командой require в JS, я попытался добавить require("ipc") на мою внешнюю страницу http://mydummysite/index.html страница, и она работала, так в чем может быть причина с require("jquery").

Правильно ли я добавил внешний модуль (jquery) в Electron?

Мне не хватает зависимости в package.json?

Что я уже пробовал:

  • 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

Вот скриншот того места, откуда возникла ошибка в module.js

введите описание изображения здесь

Может кто-нибудь подсказать, почему require("ipc") работает, а require("jquery") нет?

Моя цель - использовать jQuery с электронным приложением с истинной интеграцией узлов.


person Raghav    schedule 28.08.2015    source источник
comment
github.com/UncoolAJ86/node-jquery/issues/35 не уверен, эта ссылка решит проблему, но поможет вам начать работу.   -  person Akki619    schedule 28.08.2015
comment
возможный дубликат Как использовать node_modules в электроне (ранее атом -оболочка)   -  person Yan Foto    schedule 29.08.2015
comment
Ян, вы упомянули тот случай, когда мы используем страницу внутри приложения Atom Shell. Я загружаю страницу с внешнего URL.   -  person Raghav    schedule 29.08.2015
comment
вы можете показать package.json для пакета jquery ??   -  person Daredzik    schedule 03.09.2015


Ответы (6)


tl; dr

В отличие от обычного приложения nodejs, где у вас есть доступ к глобальным модулям (например, расположенным в /usr/bin/node), электрон не устанавливает автоматически переменные среды NODE_PATH. Вы должны установить его вручную для всех путей, содержащих желаемые модули.


Обновление:

Ответ на вопрос

почему require("ipc") работает, а require("jquery") нет?

можно найти в этой проблеме, в которой говорится, что системные / пользовательские модули не должны включаться в глобальный путь модуль

поскольку они могут содержать модули, не поставляемые с приложением и, возможно, скомпилированные с неправильными заголовками v8.

И если вы посмотрите на источник электрона видно, что в module.globalPaths добавлены внутренние модули:

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

вот почему у вас есть доступ к ipc, app и т. д., но не к модулям, которые вы установили глобально с помощью npm install -g.


Я только что попробовал это с последней версией electron-prebuilt с локальным сервером, обслуживающим точно такой же HTML-файл. которые вы предоставили, и я думаю, что знаю, в чем проблема: если вы не добавите путь к каталогу вашего приложения node_modules в корне вашего приложения в переменную NODE_PATH, он не будет работать. Итак, вам нужно сделать что-то вроде этого:

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

При экспорте NODE_PATH убедитесь, что вы указали абсолютный путь.


**Update 2:**

Ответ на комментарий:

Я получаю ошибки "Не найден jQuery"

Его можно найти в этом билете. В основном, если вы используете пакет jQuery npm или делаете что-то вроде следующего в своих HTML-файлах внутри электрона:

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

Вы получаете factory, а не фактический объект jQuery, прикрепленный к глобальному контексту (например, window). Как я уже упоминал в предыдущем ответе (содержащем также исходный код jQuery)

Когда вам требуется jQuery внутри CommonJS или аналогичной среды, которая предоставляет module и module.exports, вы получаете фабрику, а не фактический объект jQuery.

Теперь, чтобы использовать эту фабрику (либо путем импорта кода из CDN, либо если у вас есть модуль npm, доступный локально), вам понадобится что-то вроде следующего:

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

Я написал статью, в которой объясняется комбинация Node + jQuery.

person Yan Foto    schedule 01.09.2015
comment
@AleksandrM Полагаю, потому что это внутренний модуль, обеспечиваемый электроном. Другие внутренние модули (например, app) также работают без проблем. - person Yan Foto; 02.09.2015
comment
@AleksandrM @raj Я сослался на проблему и исходный код, показывающий, почему ipc доступен, а почему глобальные узелки нет! - person Yan Foto; 03.09.2015
comment
@AleksandrM теперь это имеет смысл и для меня :) - person Yan Foto; 03.09.2015
comment
Действительно хорошее продолжение, собирались добавить, но вы его закрыли. - person J-Boss; 04.09.2015
comment
@ J-Boss спасибо! это был один из тех вопросов, на который я думал, что знаю ответ, прежде чем узнал, что не знаю! - person Yan Foto; 04.09.2015
comment
Если я буду ссылаться на ‹скрипт src = code.jquery.com/jquery -2.1.4.min.js ›‹ / script ›, то я получаю jQuery not found error in electronics. Если я прокомментирую if (typeof module === object && typeof module.exports === object) {только в основном файле jquery, тогда jQuery доступен. - person Raghav; 05.09.2015
comment
@raj Ответ мог сбить с толку, но, пожалуйста, прочтите упомянутую статью и исходный код jQuery, чтобы лучше понять, как это работает в средах CommonJS. Тем не менее, я обновил свой ответ, чтобы он содержал всю необходимую информацию. - person Yan Foto; 05.09.2015
comment
@YanFoto. Я использовал require ('gulp'), это напоминает мне ошибку: не могу загрузить модуль gulp. Как мне поступить? Я не понимаю, куда мне поместить этот код export NODE_PATH=/PATH/TO/APP/node_modules electron /PATH/TO/APP - person Ng2-Fun; 23.03.2016
comment
я тоже, @YanFoto, не могли бы вы пошагово описать, где нам нужно разместить этот код? - person lukaszkups; 14.01.2020

Установить jquery с помощью npm недостаточно:

npm install --save jquery

Он восстанавливает исходные файлы jQuery в вашем проекте. Но вы должны включить скрипт в свой 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>
person Damien    schedule 28.08.2015
comment
Путь node_modules / jquery / dist / jquery.min.js приведет к mydummysite / node_modules / jquery /dist/jquery.min.js, что даст 404. В моем приложении Electron установлен модуль jquery вместо удаленного приложения (mydummysite) - person Raghav; 28.08.2015
comment
Да, но если вы хотите использовать jquery на своем фиктивном сайте, вам необходимо загрузить jquery на свой фиктивный сайт. Для тестирования вы можете включить скрипт из jquery CDN, например, без проблем с путём: ‹script src = code.jquery.com/jquery-2.1.4.min.js› ‹/ script - person Damien; 28.08.2015
comment
Если я использую тег скрипта, пространство имен jQuery не отображается. Кажется проблема с модулями с интеграцией узлов. - person Raghav; 31.08.2015
comment
Пространство имен jQuery не отображается, но $ отображается нормально. - person Damien; 01.09.2015
comment
Мне нужно пространство имен jQuery, потому что оно упоминается во многих местах моего веб-сайта. - person Raghav; 05.09.2015
comment
Добавьте window.jQuery = window. $ = JQuery; - person Damien; 07.09.2015

У меня такая же проблема при использовании jQuery с электроном, и я ищу решение для этого случая:

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

Источник: https://discuss.atom.io/t/electron-app-to-host-external-site/16390/9

person gunivan    schedule 24.03.2016

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

вместо require ( "jquery" ) укажите относительный путь от исходного каталога
require ( "./ node_modules / jquery / dist / jquery.min.js" );

Попробуйте следующее:

<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>
person VanagaS    schedule 19.07.2016

Надеюсь, ссылка ниже прояснит ваши сомнения в отношении

почему require ("ipc") работает, а require ("jquery") нет?

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

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

person Akki619    schedule 31.08.2015
comment
Мне нужно включить взаимодействие с узлами. Вторая ссылка говорит, что нужно убираться. - person Raghav; 31.08.2015

Та же проблема случилась со мной, простое решение - добавить это в ваш файл index.js:

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

проблема вызвана узлом, для получения дополнительной информации обратитесь к этому сообщение

Установка node-integration в false отключит node.js в процессе рендеринга, то есть ваше приложение может делать только то, что будет делать веб-браузер.

person ProllyGeek    schedule 05.09.2015