Electron: jQuery ist nicht global eingestellt, weil "Modul" definiert ist

Dies ist nicht wirklich ein Fehler für beide Systeme, Sie haben das gleiche Problem, wenn Sie browserify verwenden. jQuery sieht, dass es in einer CommonJS-Umgebung ausgeführt wird und erwartet, dass es als solches verwendet wird.

Die Lösung ist jedoch relativ einfach. Anstatt jQuery als Skript-Tag zu laden, laden Sie es über require:

window.$ = window.jQuery = require('/path/to/jquery');

Ich stimme @ChiperSoft zu , dies ist das erwartete Verhalten in der CommonJS-Umgebung, daher habe ich dies als wontfix markiert. Und danke, dass du deine Erkenntnis geteilt hast.

@ChiperSoft , Wo soll ich die Datei jquery.js ablegen, damit require('jquery') funktioniert? Ich habe versucht, es auf das gleiche Niveau wie package.js und main.js aber die Laufzeit scheint es nicht aufzunehmen.

Sie können require('jquery.js') Beachten Sie die .js am Ende, um jquery relativ zu Ihrer HTML-Datei zu laden.

Entschuldigung, ich habe wie erwähnt window.$ = window.jQuery = require('/path/to/jquery'); , aber es funktioniert nicht.
Uncaught Error: Cannot find module 'scripts/jquery-1.10.2.min.js' module.js:339

Ich benutze das die ganze Zeit und es funktioniert super! Folgendes verwende ich, achten Sie auf den Pfad:

window.$ = window.jQuery = require('./scripts/jquery-2.1.1.min.js');

@frankhale oh, es hat mit ./ geklappt , danke!

Genial! Die Sache mit dem Pfad hat mich auch gestolpert.

Wenn Ihre App keine Knotenintegration benötigt, fügen Sie "node-integration": false zu Ihren BrowserWindow-Optionen hinzu. In diesem Fall ist module.exports nicht verfügbar, jQuery funktioniert wie erwartet.

@kabalage hat wunderbar funktioniert, danke!

:+1:

Bin auf das gleiche Problem gestoßen. Installieren Sie jQuery über NPM, dann ist es erforderlich und es hat funktioniert.

Was ist, wenn Knoten-Integeration und jquery ohne die Anforderung erforderlich sind ...

Ich versuche, dies zu verstehen, da es anscheinend etwas ist, das ich gebrauchen könnte. Ich frage mich jedoch, wann Sie sicher sein können, dass Sie $ sicher verwenden können. Das Protokollieren von $ direkt nach dieser Zeile wird als erforderlich und nicht als jquery resultieren, da die Anforderung asynchron ist?

window.$ = window.jQuery = require('/path/to/jquery');
console.log($) // logs 'require' nicht 'jQuery'

@dieroux versuche es über npm zu installieren:

npm install jquery

Dies hat bei mir funktioniert, während ich das gleiche ausprobiert habe. Dann brauchst du keinen Pfad anzugeben, du sagst einfach:

window.$ = window.jQuery = require('jquery');
console.log( [$, jQuery ]);

Was ist, wenn wir eine Knotenintegration benötigen und require('something') nicht verwenden können?
Derzeit funktioniert es, indem Sie "Modul löschen" ausführen; bevor Sie problematische Sachen laden.
Welche Auswirkungen hat dies?

Ich habe ähnliche Probleme, bei denen jquery richtig geladen werden kann, wenn ich es zum ersten Mal in einem Preload-Skript in einer Webansicht benötige. Beim zweiten Mal wird jquery jedoch von einer externen Seite referenziert, die Zeile, um es zuzuweisen über:

  try {
        module.exports = null;
        if (typeof require === 'function') {
          alert('window: ' + window);
          alert('jquery: ' + window.jQuery);
          alert('export: ' + module.exports);
          if ( !window.jQuery ) {
            alert('before load');
            window.jQuery = require('./node_modules/jquery/dist/jquery.js');
            alert('after load');
            window.$ = window.jQuery;
            alert('after assignment');
         }
          alert('jquery: ' + window.jQuery);
        }
    } catch(e) {
        alert('failed load.');
        console.log(e);
    }

wirft eine Cannot read-Eigenschaft createElement of undefined in der Konsole bei der Zuweisung zu window.jQuery von require aus, was dazu führt, dass jQuery nicht geladen wird.

Fehlermeldung auf der Konsole ist:
Gastseite hat eine Nachricht protokolliert: TypeError: Cannot read property 'createElement' of undefined line: 40

Irgendwelche zusätzlichen Gedanken zum erfolgreichen Laden von Jquery auf nachfolgenden Seiten?

Danke.

Dies war das erste, worüber ich beim Durchlaufen des Elektron-Schnellstarts gestolpert bin und versucht habe, eine lokale App einzubinden - etwas, das in Chrome funktioniert, funktioniert plötzlich nicht mehr. Es hilft natürlich nicht, den Fehler in fehlgeschlagenen Winkelmodul-Ladevorgängen zu begraben, daher nahm ich an, dass es ein Problem mit der Skript-Ladereihenfolge gab, und so habe ich diesen Thread gefunden. Vielleicht helfen die Stichworte anderen weiter.

Die obige Lösung von

Hallo zusammen, ich möchte nur ein paar Informationen zu diesem Problem hinzufügen, wenn ich den jquery-Bibliothekscode in die Elektronenkonsole $ einfüge und jQuery als Funktion im Fensterobjekt hinzugefügt wird. Ich konnte jquery ausführen.

Referenzierte jQuery mit script-Tag, gleicher Fehler. Muss "node-integration": false in BrowserWindow()

Hallo Leute... Ich bin mir nicht sicher, warum dieses Thema geschlossen ist, es gibt definitiv noch ein Problem hier, lass es mich erklären. Wenn ich jQuery lokal über NPM installiere und eine lokale HTML-Datei lade, dann mit:

mainWindow.$ = require('jQuery');
mainWindow.jQuery = require('jQuery');

dann funktioniert es wie erwartet. Wenn ich jedoch mainWindow.loadUrl('http://external.site.com");

Ich erhalte die erwähnten Fehler, bei denen $ und jQuery nicht definiert sind. Das Deaktivieren der Knotenintegration ist wirklich keine akzeptable Antwort; Das ist der Grund, warum ich Electron verwende, ich brauche es.

Ich würde gerne in die Quelle gehen und dies selbst beheben, aber ich dachte, ich würde sehen, ob jemand zusätzliche Informationen dazu hat, die mich in die richtige Richtung weisen, bevor ich dorthin gehe. Hat jemand dies _mit_ Knotenintegration gegen externe Sites zum Laufen bekommen?

Danke... und tolle Arbeit BTW. Alles Neue und Schöne, so wie dieses, beginnt mit ein paar Fältchen.

Mit freundlichen Grüße

/W

Ich habe es mit Node-Integration zum Laufen gebracht.

1. Installieren Sie es mit npm, sodass es in package.json definiert ist
2. Verwenden Sie erforderlich mit dem Modulnamen <script>window.$ = window.jQuery = require('jquery');</script>
3. Verwenden Sie den Pfad nicht im erforderlichen Parameter.
4. Installieren Sie nicht durch Bower, da Sie sonst den Pfad in den erforderlichen Parametern verwenden müssen.
5. Wenn Sie Bootstrap verwenden, müssen Sie zuerst jQuery laden.

Alle oben genannten nur durch meine Erfahrung gestützt.

Wird funktionieren

    <script>window.$ = window.jQuery = require('jquery');</script>
    <script src="path_to/bootstrap.js"></script>

Wird nicht

    <script>window.$ = window.jQuery = require('./path/to/jquery.js');</script>
    // or
    <script src="path_to/jquery.js"></script>
    <script src="path_to/bootstrap.js"></script>

Hallo dilmdeep, danke für die schnelle Antwort. Hängt Ihre Lösung davon ab, die Kontrolle über die externe Site zu haben? Ich versuche, eine Site zu laden, auf die ich keinen Quellzugriff habe. Was Sie über package.json gesagt haben, ist jedoch interessant. Ich habe jQuery über npm installiert (und den dokumentierten Rebuild für Electron verwendet) und wie gesagt, ich kann jQuery mit einer lokalen HTML-Datei verwenden, aber jQuery ist nicht in meinem package.json definiert..... Oh und ich habe es getestet mit dem Deaktivieren der Node-Integration und obwohl das funktioniert, ist es nicht das, was ich brauche. Danke.

Ich wollte dies nur aktualisieren, falls jemand anderes in das gleiche Problem gerät. Die Art und Weise, wie ich dies umgangen habe (nach dem Herunterladen von 10 GB Electron-Quelle), war ursprünglich in der Dokumentation enthalten. Anstatt die URL der externen Site aufzurufen, habe ich eine lokale HTML-Datei geladen und eine Webansicht aus dieser HTML-Datei verwendet, um die externe Site zu laden. Es lädt perfekt mit aktivierter Knotenintegration. Schauen Sie einfach in der Dokumentation nach Webview, es ist ziemlich einfach. Außerdem danke ich Paul im Chatroom, der mir geholfen hat, mit der Quelle zu beginnen. Wenn sich jemand wundert, verwenden sie Atom (natürlich) zum Codieren von Electron, WinDbg unter Windows zum Debuggen und Ninja zum Kompilieren. Zu Ihrer Information, das Kompilieren der Quellen war kinderleicht und überraschend schnell, es wurde auf Anhieb mit ihren Skripten und der mitgelieferten Dokumentation kompiliert. Wieder tolle Arbeit Jungs!

@WolfieWerwolf Bravo! Ich muss sagen, das Beispiel ist etwas irreführend, wenn man die Sicherheit berücksichtigt.

@ Shufeng01 Prost, Kumpel, ich komme bei dieser Kälte aus dem .Net-Land und fühle mich wie ein kompletter n00b. Sie haben Recht, dass die Sicherheit ein Problem war, aber die Verwendung des Flags disablewebsecurity in der Webansicht selbst hat das meiste davon gelöst. Ich denke, dass Sicherheit im Allgemeinen die größte Herausforderung ist, um das Web auf den Desktop zu bringen ... aber die Mühe lohnt sich. Elektronengestein.

@diimdeep danke, @WolfieWerewolf will!)

Das ist für uns ein kleines Problem. Wir bündeln jquery mit unserer App js, und dieses verkettete JS wird dann im Build sowohl für die Web- als auch für die Desktop-Version verwendet (wir haben NWJS verwendet). Die NPM-Installation kann für uns eine Option sein, ist jedoch in unserer Situation aus mehreren Gründen nicht ideal.

Gibt es keine theoretische Möglichkeit, es mithilfe von Skript-Tags zum Laufen zu bringen?

@bgSosh, warum nicht deaktivieren Knoten Integration (lesen Sie über die node-integration Schlüssel hier )? Wenn Sie dies tun, sollten Skript-Tags korrekt funktionieren. Wenn Sie einige knotenbezogene Dinge benötigen, können Sie dies in einem preload Skript tun (sie haben immer eine Knotenintegration).

@etiktin können Sie bitte erläutern, wie dies im Preload geht? Ich bin neu bei Electron und habe es nicht geschafft, ein Preload-Skript zur Ausführung zu bringen (zumindest scheint es nicht ausgeführt zu werden, console.log funktioniert nicht, Fenster ändern.myExposedIPC = require('ipc') zum Beispiel ist später nicht verfügbar usw.

Ich habe es zum Laufen gebracht, falls jemand das gleiche Problem hat: https://github.com/atom/electron/issues/1753#issuecomment -157409572

@matthiasg schön, dass es funktioniert. Ich habe Ihrem Beispiel einige Kommentare hinzugefügt.

Wenn die Knotenintegration deaktiviert ist und Sie einige Knotenaufgaben in Ihrem Preload-Skript ausführen möchten, ist es wichtig, einen Verweis auf alle benötigten globalen Knoten zu speichern. Sie müssen dies tun, da beim nächsten Häkchen die globalen Referenzen gelöscht werden (so wird die Deaktivierung der Knotenintegration implementiert), wenn Sie also keine Referenz gehalten haben und dann versuchen, etwas für einen Funktionsaufruf oder einen Timer zu verlangen , es würde scheitern.

@etiktin danke. Natürlich war das ein Teil davon, aber was mir gefehlt hat, ist die Dokumentation für process.once('loaded', ... ) .

Hallo Leute,

Da keines der oben genannten Funktionen für mich funktionierte (mit w2ui und JQuery sowohl mit Electron als auch mit unabhängiger HTML-Seite, lassen Sie auch w2ui jQuery verwenden), hatte ich das Bedürfnis, meine funktionierende Lösung hier zu veröffentlichen:

<html>
<head>
    <title>MyApp</title>
    <link rel="stylesheet" type="text/css" href="./lib/w2ui-1.4.3.css"/>
    <script type="text/javascript" src="./lib/require.js"></script>
    <script type="text/javascript" src="./lib/jquery-2.1.4.js" onload="$ = jQuery = module.exports;"></script>
    <script type="text/javascript" src="./lib/w2ui-1.4.3.js"></script>
</head>
<body>
<script type="text/javascript">
    // use global $ and w2ui here... 
    ...

Ich bin ein Neuling bei JS und führe eine Technologiestudie durch und mache mir jetzt ein bisschen Sorgen über dieses obskure Modulladezeug. Es mag eine dumme Frage sein, aber warum lädt Electron JS-Module beim Laden einer HTML-Seite so anders als normale Browser?

@forman haben Sie die Knotenintegration deaktiviert und ein Preload-Skript für die Knoteninteraktion verwendet? Siehe die Kommentare oben von mir und @matthiasg. Wenn Sie dies tun, funktionieren jquery und der Rest genauso wie im Browser.

Wird funktionieren

requirejs(['require', '../require.config'], function (requirejs, config) {
        //fixed jQuery isn't set globally
        requirejs(['jquery'],function(jquery){
            window.$ = window.jQuery =jquery;
        });
        // update global require config
        window.requirejs.config(config);
        // load app
        requirejs(['main'],function(main){
        });
    });

@forman Danke !! Keines der oben genannten hat funktioniert, außer Ihrer Lösung. (unter Verwendung von vorgefertigten Elektronen 0,35,5)
@etiktin Das hat bei mir funktioniert, ohne etwas auf der mainProcess-Seite ändern zu müssen

Ich dachte, ich sollte unser Problem und unsere Lösung diesem Thread zum späteren Nachschlagen hinzufügen.

Wir laden eine externe URL in eine Webansicht und müssen unser eigenes Javascript ausführen, das Electron/Node verwenden kann. Das Aktivieren der Nodeintegration in der Webansicht ist keine Option, da dies jQuery unterbricht, das von der externen URL verwendet wird.

Am Ende fügten wir der Webansicht ein Preload-Skript hinzu, in dem wir die benötigten Module im globalen Bereich ablegen. Dies macht sie später zugänglich, wenn wir unser Javascript ausführen.

preload.js:

global.ipcRenderer = require('electron').ipcRenderer;

Und dann können wir auf den ipcRenderer zugreifen wie:

webview.executeJavaScript("ipcRenderer.sendToHost('hello');");

Uncaught Error: Cannot find module 'jquery' und nichts hilft von diesem Thread =/

Deaktiviere einfach module .

Ich wollte, dass meine Webseite sowohl im Browser als auch im Elektron funktioniert.
Wie in diesem Thread erklärt, stellt Electron ein globales module wenn nodeIntegration: true , das jQuery dann sieht und entsprechend reagiert:

if ( typeof module === "object" && typeof module.exports === "object" ) {
    // bind to module
} else {
    // bind to window
}

Ich konnte jQuery dazu bringen, sich an das window Objekt zu binden und nodeIntegration: true indem ich in meiner HTML-Datei Folgendes tat:

<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script>if (window.module) module = window.module;</script>

Hoffe das hilft jemandem.

@tomkel hier ist eine andere Lösung:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>window.jQuery = window.$ = module.exports;</script>

In meinem Fall muss ich meine Anwendung sowohl als Website als auch als Electron-Anwendung starten können. Hier meine Lösung:

<!-- Launched with Electron -->
<script>
    if ('require' in window) {
        window.$ = window.jQuery = require('jquery');
    }
</script>

<!-- From CDN, Bower, etc... -->
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>

<!-- Others libraries depending on jQuery -->
<script src="..."></script>

@dkfiresky Ja, das scheint auch zu funktionieren. Allerdings verwende ich Highcharts in Verbindung mit jQuery. Highcharts macht eine ähnliche Sache und platziert sich auf module falls es existiert. Aus irgendeinem Grund konnte ich es nicht bekommen

<script>window.Highcharts = module.exports;</script>

arbeiten. Ich habe meinen vorherigen Kommentar aktualisiert, um dies widerzuspiegeln.

@tomkel deine Lösung mit dem zeitlichen Verstecken von module funktioniert bei mir sehr gut. Mein Problem war während der Migration von nw.js mit ngDialog unter der Annahme, dass es sich in der CommonJS-Umgebung nicht auf require('angular') und sich selbst als Winkelmodul registriert.

In Electron 0.36.7 finde ich, dass ich kein einfaches window.$ = require('jquery'); ausführen kann, da es das Modul nicht finden würde. Der Renderer scheint nicht den gleichen Modulauflösungspfad wie der Hauptprozess zu haben

Tatsächlich funktioniert das nicht, da jQuery im Hauptprozess ausgeführt würde, der nicht über document . Und require('jquery') hat bei mir nicht funktioniert, weil ich die Seite über HTTP wie #4243 bereitstelle. Um dies zu beheben, habe ich versucht, Modulpfade vom Hauptprozess zum Rendererprozess hinzuzufügen, indem ich:

require('electron').remote.process.mainModule.paths.forEach(function(path) {
    require('module').globalPaths.push(path);
});

Danach kann ich ohne Probleme require('jquery') . Ich bin mir jedoch nicht sicher, welche anderen Auswirkungen dies haben könnte

Und require('jquery') hat bei mir nicht funktioniert, weil ich die Seite über HTTP wie #4243 bereitstelle.

Wenn Sie Remote-Inhalten den Zugriff auf node.js erlauben, ist Ihre App sehr unsicher. Sie müssen die Knotenintegration deaktivieren, wenn Sie Remote-Inhalte ausführen und ein Preload-Skript verwenden

Auch wenn der "Remote-Inhalt" localhost ist? Ich verwende Node, um die Seite zu erstellen und mir bereitzustellen, anstatt aus einer lokalen Datei zu lesen, das ist alles

Wenn Sie @dkfiresky erweitern , erhalten Sie in der Browserversion möglicherweise ein Uncaught ReferenceError: module is not defined .

Wenn ja, versuchen Sie Folgendes:

<script src="./bower_components/jquery/dist/jquery.min.js"></script>
<script>window.jQuery = window.$ = typeof module === 'object' ? module.exports : jQuery</script> 

@dspint module wird nur dann undefiniert sein, wenn die Knotenintegration deaktiviert ist, daher sollten Sie mein Beispiel wahrscheinlich nur mit aktivierter Knotenintegration verwenden.

Wenn Sie window.open , können Sie nodeIntegration=0 mit Ihren Fensteroptionen übergeben.

window.open('https://your.cool/url', 'title', 'nodeIntegration=0');

Ich mache:

<script>
  var saveModule = module;
  delete module;
</script>
  <script src="jquery.js"></script>
  <script src="jquery-ui.js"></script>
<script>
  module = saveModule;
</script>

Ich hatte das gleiche Problem wie @gnail. Ich hatte einen Knotenserver, auf dem ein Winkelprojekt ausgeführt wurde. Sein Code hat es für mich behoben.

require('electron').remote.process.mainModule.paths.forEach(function(path) {
  require('module').globalPaths.push(path);
});

Bei mir funktioniert es

<script>
    window['old_module'] = window['module'];
    delete window.module;
</script>

<script src="any_lib_like_jquery.js" />

<script>
    window['module'] = window['old_module'];
    delete window.old_module;
</script>

Ich habe dieses Problem, ich habe den ganzen Thread schon probiert. aber nichts funktioniert, ich stecke am Anfang fest
von allen.
Ich verwende den Elektronenstarter-Rep

@ PauloGaldo im Grunde sollte jede Lösung in diesem Thread funktionieren. Bitte posten Sie den entsprechenden Auszug Ihres Codes und alle Fehlermeldungen, auf die Sie stoßen.

@ChiperSoft Können Sie mir bitte sagen, wo ich Ihren Code verwenden soll?

@tomkel Sehr schön!
Endlich habe ich Masonry dazu gebracht, bei Electron zu arbeiten!

Aus irgendeinem Grund kann ich jQuery immer noch nicht sowohl im Browser als auch in der Electron-App zum Laufen bringen.
Meine Web-App funktioniert im Browser einwandfrei. Wenn ich jedoch versuche, dieselbe URL über die Elektron-App zu laden, wirft sie -

Webapp - https://github.com/zulip/zulip
Elektronen-App - https://github.com/zulip/zulip-electron

Die Webapp verwendet die Version jquery 1.12.1 über npm.
Ich kann nodeintegration nicht off verwenden, weil ich es in meinem Renderer-Prozess benötige.
Es fällt mir schwer, das zu lösen. Weiß jemand, wie es funktioniert?
cc @aaaaahaaaaa @maykefreitas @paulcbetts @tomkel @dkfiresky

@englishextra kein Glück. Ich habe versucht, Ihren Code in preload.js meiner App erhalte jedoch denselben Fehler.

@englishextra Nein, ich brauche kein jquery in meiner App. Den Update-Code finden Sie hier . Ich kann Ihren Code in meine app - Logik nicht enthalten , da ich es nur die angegebenen URL siehe zum Laden bin mit diesem .

für diejenigen, die das Aurelia-Framework verwenden:
https://github.com/aurelia/skeleton-navigation/pull/675/commits/6292e698dcb8f383afc748aa7c8a50e540dfbe2e

Ich habe dieses Problem damit gelöst

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

und setze

webPreferences: {
            nodeIntegration: false, 
        }

wenn du mit nodeIntegration: true, imorot jQuery so findest

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

Bezug auf
https://github.com/electron/electron/issues/345

Ich meine, es scheint ein schlimmes Problem zu sein, also warum nicht es in echtes Electron aufnehmen? Vielleicht wichtige JavaScript-Bibliotheken in Electron integrieren?

Wenn Sie jQuery in einer Electron-App verwenden, ist es wahrscheinlich, dass Sie etwas sehr falsch oder zumindest ineffizient machen.

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};</script>

@drowlands Das Einbinden von
@amhoho Das liegt daran, dass Sie require jQuery ausführen oder seinen Init-Code an der obersten Funktion ändern müssen - es bleiben nur factory( global );

Hier:

( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {

        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

In meinem Fall lade ich Bibliotheken über fetch/Promise oder xhr, also habe ich diese Routine, um Modulprüfungen in den Bibliotheken der Anbieter zu entfernen.
@RRorg komisch was du sagst

markieren

@kabalage Ich denke, die Konfiguration in Ihrem obigen Beitrag ist veraltet. Es sieht so aus, als ob es jetzt so sein sollte:

const window = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false, 
  },
});

In offiziellen Dokumenten:
https://electronjs.org/docs/faq#i -can-not-use-jqueryrequirejsmeteorangularjs-in-electron
```