Electron: 「モジュール」が定義されているため、jQueryはグローバルに設定されません

これはどちらのシステムにとっても実際にはバグではありません。browserifyを使用するときに同じ問題が発生します。 jQueryは、CommonJS環境で実行されていることを確認し、そのように使用されることを期待しています。

ただし、解決策は比較的簡単です。 jQueryをスクリプトタグとしてロードする代わりに、requireを介してロードします。

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

@ChiperSoftに同意しwontfixとしてマークしました。 そして、あなたの発見を共有してくれてありがとう。

@ ChiperSoft 、 require('jquery')機能させるには、jquery.jsファイルをどこに置く必要がありますか？ package.jsおよびmain.jsと同じレベルに配置しようとしましたが、ランタイムがそれを取得していないようです。

require('jquery.js')使用して、最後に.jsを書き留めて、HTMLファイルに関連するjqueryをロードできます。

申し訳ありませんが、前述のようにwindow.$ = window.jQuery = require('/path/to/jquery');を使用しましたが、機能しません。
Uncaught Error: Cannot find module 'scripts/jquery-1.10.2.min.js' module.js:339

私はいつもそれを使っています、そしてそれは素晴らしい働きをします！ これが私が使用するものです、パスに注意してください：

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

@frankhaleああ、それは./で動作しました、ありがとう！

素晴らしい！ パスの事も私をつまずかせました。

アプリがノード統合を必要としない場合は、BrowserWindowオプションに"node-integration": falseを追加します。 この場合、 module.exportsは使用できず、jQueryは期待どおりに機能します。

@kabalageは素晴らしく機能しました、ありがとう！

：+1：

同じ問題に歩み寄りました。 NPMを介してjQueryをインストールすると、それが必要になり、機能しました。

ノードの整数化とrequireなしのjqueryが必要な場合はどうなりますか...

これは私が使用できるもののように見えるので、私はこれを理解しようとしています。 しかし、いつ安全に$を使用できると確信できるのだろうか。 この行の直後に$をログに記録すると、requireは非同期であるため、jqueryではなくrequireになりますか？

window。$ = window.jQuery = require（ '/ path / to / jquery'）;
console.log（$）//ログ 'require'ではなく 'jQuery'

@dierouxはnpm経由でインストールしてみてください：

npm install jquery

同じことを試みている間、これは私のために働きました。 次に、パスを指定する必要はありません。次のように言います。

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

ノード統合が必要で、require（ 'something'）を使用できない場合はどうなりますか？
現在、「モジュールの削除」を実行することで機能します。 問題のあるものをロードする前に。
これを行うことの影響は何ですか？

Webビューのプリロードスクリプトで初めてjqueryが必要になったときに、jqueryを正しくロードできるという同様の問題が発生しています。 ただし、2回目にjqueryが外部ページから参照される場合、それを割り当てる行は次のとおりです。

  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);
    }

requireからwindow.jQueryへの割り当て時にコンソールで未定義のプロパティcreateElementを読み取ることができないため、jQueryがロードされません。

コンソールのエラーメッセージは次のとおりです。
ゲストページにメッセージが記録されました：TypeError：未定義の行のプロパティ 'createElement'を読み取れません：40

後続のページでjqueryを正常にロードする方法についての追加の考えはありますか？

ありがとう。

これは、私が電子クイックスタートを実行してローカルアプリをラップしようとしたときに最初につまずいたことでした。クロムで動作しているものが突然選出されなくなりました。 もちろん、失敗した角度モジュールのロードにエラーを埋め込んでも役に立たないので、スクリプトのロード順序に問題があると思いました。これが、このスレッドを見つけた方法です。 おそらく、キーワードは他の人を助けるでしょう。

上記の@kabalageのソリューションは完全に機能しました。

みなさん、こんにちは。この問題に関する情報を追加したいのですが、jqueryライブラリコードをelectron console $に貼り付け、jQueryがウィンドウオブジェクトの関数として追加された場合。 jqueryを実行できました。

スクリプトタグでjQueryを参照しましたが、同じエラーです。 「ノード統合」する必要があります：BrowserWindow（）でfalse

こんにちは皆さん...なぜこの問題が解決されたのかわかりません。ここには間違いなくまだ問題があります。説明させてください。 NPMを介してjQueryをローカルにインストールし、ローカルのhtmlファイルをロードする場合は、次を使用します。

mainWindow。$ = require（ 'jQuery'）;
mainWindow.jQuery = require（ 'jQuery'）;

その後、期待どおりに機能します。 ただし、mainWindow.loadUrl（ 'http://external.site.com "）;を実行した場合。

$とjQueryが定義されていない場合に言及されたエラーが発生します。 ノード統合を無効にすることは、実際には受け入れられない答えです。 そもそもElectronを使っているのはそれが理由です。必要です。

私はソースにアクセスしてこれを自分でトラブルシューティングすることに熱心ですが、私がそこに行く前に、誰かが私を正しい方向に向けるための追加情報を持っているかどうかを確認すると思いました。 誰かがこれを外部サイトに対してノード統合で機能させることができましたか？

ありがとう...そして素晴らしい仕事ところで。 このように新しくて美しいものはすべて、いくつかのしわから始まります。

敬具

/ W

私はそれをノード統合で動作させました。

1. npmでインストールするので、package.jsonで定義されます
2. モジュール名<script>window.$ = window.jQuery = require('jquery');</script> requireを使用します
3. requireパラメーターでpathを使用しないでください。
4. トラフバウアーをインストールしないでください。requireパラメーターでパスを使用するようになります。
5. ブートストラップを使用する場合は、最初にjQueryをロードする必要があります。

上記のすべては私の経験によってのみサポートされています。

動作します

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

しない

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

こんにちはdilmdeep、迅速な対応に感謝します。 あなたのソリューションは、外部サイトを管理することに依存していますか？ ソースアクセス権のないサイトを読み込もうとしています。 ただし、packages.jsonについてあなたが言ったことは興味深いものです。 私はnpmを介してjQueryをインストールしました（そして電子の文書化された再構築を使用しました）そして私が言ったように、ローカルHTMLファイルでjQueryを使用できますが、jQueryは私のpackage.jsonで定義されていません.....ああ、私はテストしましたノード統合を無効にすることで、それは機能しますが、それは私が必要とするものではありません。 ありがとう。

他の誰かが同じ問題に遭遇した場合に備えて、これを更新したかっただけです。 私がこれを回避した方法（10GBのElectronソースをダウンロードした後）は、実際には最初からドキュメントにありました。 外部サイトのURLを呼び出す代わりに、ローカルHTMLファイルをロードし、そのhtmlファイルのWebビューを使用して外部サイトをロードしました。 ノード統合を有効にすると完全にロードされます。 Webviewのドキュメントを見るだけで、非常に簡単です。 また、チャットルームでソースを使い始めるのを手伝ってくれたPaulにも感謝します。 誰かが疑問に思っているなら、彼らは（もちろん）Atomを使ってElectronをコーディングし、WindowsのWinDbgを使ってデバッグし、Ninjaを使ってコンパイルします。 参考までに、ソースのコンパイルは非常に簡単で驚くほど高速でした。最初に、スクリプトと提供されたドキュメントを使用してコンパイルしました。 繰り返しになりますが、素晴らしい仕事をしています！

@WolfieWerewolf Bravo！ セキュリティを考慮した場合、この例は少し誤解を招くと言わざるを得ません。

@ Shufeng01乾杯の仲間、私は.Netの土地からこの寒さに来ているので、完全なn00bのように感じています。 確かにセキュリティが問題でしたが、Webビュー自体でdisablewebsecurityフラグを使用すると、ほとんどの問題が解決しました。 一般に、セキュリティはWebをデスクトップに導入するための最大の課題だと思いますが、努力する価値は十分にあります。 電子岩。

@diimdeepありがとう、あなたの解決策は私のために働きます（ @WolfieWerewolfが望んでいるものではありません！）

これは私たちにとって少し問題です。 jqueryをアプリjsにバンドルし、この連結されたJSをWebバージョンとデスクトップバージョンの両方のビルドで使用します（NWJSを使用しています）。 NPMのインストールは私たちにとってオプションかもしれませんが、いくつかの理由から、私たちの状況では理想的ではありません。

スクリプトタグを使用して動作させる理論的な方法はありませんか？

@bgSosh 、ノード統合を無効にしてみませんか（ここでnode-integrationキーについて読んでください）？ そうすれば、スクリプトタグは正しく機能するはずです。 ノード関連のものが必要な場合は、 preloadスクリプトでそれを行うことができます（それらには常にノード統合があります）。

@etiktinプリロードでこれを行う方法を詳しく説明していただけますか？ 私はelectronに不慣れで、プリロードスクリプトを実行することができました（少なくとも、実行されないようです、console.logが機能しない、window.myExposedIPC = require（ 'ipc'）を変更するなど、後で利用できません）。

誰かが同じ問題を抱えている場合に備えて、私はそれを機能させています： //github.com/atom/electron/issues/1753#issuecomment -157409572

@matthiasgあなたがそれを

ノード統合が無効になっていて、プリロードスクリプトでノード処理を実行する場合は、必要なノードグローバルへの参照を保持することが重要です。 次のティックでグローバル参照が削除されるため（これはノード統合を無効にする方法です）、参照を保持していない場合は、関数呼び出しまたはタイマーで何かを要求しようとするため、これを行う必要があります、失敗します。

@etiktinありがとう。 もちろんそれはその一部でしたが、私が見逃していたのは、 process.once('loaded', ... )が配置された後のドキュメントであり、実際に必要なAPIを公開できます。

こんにちは、みんな、

上記のどれも私にはうまくいきませんでした（電子と独立したHTMLページの両方でw2uiとJQueryを使用し、w2uiもjQueryを使用します）、私はここに私の実用的なソリューションを投稿する必要を感じました：

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

私はJSの初心者であり、テクノロジースタディを実行していますが、このあいまいなモジュールの読み込みについて少し心配しています。 ばかげた質問かもしれませんが、HTMLページをロードするときに電子がJSモジュールを通常のブラウザとそれほど異なる方法でロードするのはなぜですか？

@formanノード統合を無効にし、ノードの相互作用にプリロードスクリプトを使用しましたか？ 私と@matthiasgによる上記のコメントを参照してください。 これを行うと、jqueryとその他の機能はブラウザの場合とまったく同じように機能します。

動作します

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ありがとうございます!! あなたの解決策を除いて、上記のどれもうまくいきませんでした。 （電子構築0.35.5を使用）
@etiktinこれは、mainProcess側で何も変更することなく機能しました。

将来の参考のために、このスレッドに問題と解決策を追加する必要があると思いました。

Webビューに外部URLをロードしており、electron / Nodeを使用できる独自のJavascriptを実行する必要があります。 Webビューでノード統合を有効にすることはオプションではありません。これは、外部URLによって使用されているjQueryを破壊するためです。

最終的に行ったのは、必要なモジュールをグローバルスコープに配置するWebビューにプリロードスクリプトを追加することでした。 これにより、後でJavascriptを実行するときにアクセスできるようになります。

preload.js：

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

そして、次のようにipcRendererにアクセスできます。

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

Uncaught Error: Cannot find module 'jquery'そしてこのスレッドから何も助けにはなりません= /

module設定を解除するだけです。

私は自分のウェブページをブラウザとエレクトロニックの両方で機能させたいと思っていました。
このスレッドで説明されているように、電子はnodeIntegration: trueときにグローバルmodule公開し、jQueryはそれに応じてそれを認識して反応します。

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

私はにバインドするjQueryのを取得することができたwindowオブジェクトと使用nodeIntegration: true私のhtmlファイルに次のように実行して：

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

これが誰かを助けることを願っています。

@tomkelは別の解決策です：

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

私の場合、アプリケーションをWebサイトとして起動することとElectronアプリケーションとして起動することの両方ができる必要があります。 これが私の解決策です：

<!-- 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はい、それもうまくいくようです。 ただし、jQueryと組み合わせてHighchartsを使用しています。 Highchartsも同様のことを行い、 moduleが存在する場合はそれ自体を

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

働くために。 それを反映するために以前のコメントを更新しました。

module一時的に非表示にして、ソリューションをrequire('angular')失敗し、Angularモジュールとして登録できないことを前提としていました。

Electron 0.36.7では、モジュールが見つからないため、単純なwindow.$ = require('jquery');を実行できないことがわかりました。 レンダラーは、メインプロセスと同じモジュール解決パスを持っていないようです

jQueryはdocumentを持たないメインプロセスで実行されるため、実際には機能しません。 また、＃4243のようにHTTPを介してページを提供しているため、 require('jquery')は機能しません

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

その後、問題なくrequire('jquery')を実行できます。 これが他にどのような影響を与える可能性があるかはわかりませんが

また、require（ 'jquery'）は、＃4243のようにHTTPを介してページを提供しているため、機能しませんでした。

リモートコンテンツがnode.jsにアクセスすることを許可している場合、アプリは非常に安全ではありません。リモートコンテンツを実行するときにノード統合を無効にし、プリロードスクリプトを使用する必要があります

「リモートコンテンツ」がローカルホストであっても？ ローカルファイルから読み取る代わりに、ノードを使用してページをビルドして提供しています。これですべてです。

@dkfireskyを拡張すると、ブラウザバージョンでUncaught ReferenceError: module is not definedが表示される場合があります。

もしそうなら、これを試してみてください：

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

@dspint moduleは、ノード統合が無効になっている場合にのみ未定義になるため、ノード統合が有効になっている場合にのみ私の例を使用する必要があります。

window.openを使用している場合は、ウィンドウオプションでnodeIntegration=0を渡すことができます。

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

私がやっている：

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

@gnailと同じ問題がありました。 Angularプロジェクトを実行しているノードサーバーがありました。 彼のコードは私のためにそれを修正しました。

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

それは私のために働いています😄

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

私はこの問題を抱えています、私はすでにこのスレッドのすべてを試しました。 しかし、何も機能しません、私は最初から立ち往生しています
全部の。
私はエレクトロンスターター担当者を使用しています

@PauloGaldo基本的に、このスレッドのすべてのソリューションが機能しているはずです。 コードの関連する抜粋と発生したすべてのエラーメッセージを投稿してください。

@ChiperSoftコードをどこで使用すればよいか教えていただけますか？

@tomkelとてもいいです！
私はついにMasonryをElectron内で動作させることができました！

何らかの理由で、ブラウザとElectronアプリの両方でjQueryを機能させることができません。
私のウェブアプリはブラウザで正常に動作しますが、エレクトロンアプリを介して同じURLを読み込もうとすると、スローされます-

Webアプリ-https ：//github.com/zulip/zulip
Electronアプリ-https：//github.com/zulip/zulip-electron

webappはnpm経由でjquery1.12.1バージョンを使用しています。
レンダラープロセスで必要なため、nodeintegrationをオフに使用できません。
私はこれを解決するのに苦労しています。 誰かがそれを機能させる方法を知っていますか？
cc @aaaaahaaaaa @maykefreitas @paulcbetts @tomkel @dkfiresky

@englishextra運がない。 アプリのpreload.jsにコードをましたが、同じエラーが発生しました。

@englishextraいいえ、アプリにjqueryは必要ありません。 こちらのアップデートコードをご覧ください。 指定されたURLをロードするためだけにコードを使用しているため、コードをアプリロジックに含めることはできません。これを参照してください。

Aureliaフレームワークを使用している場合：
https://github.com/aurelia/skeleton-navigation/pull/675/commits/6292e698dcb8f383afc748aa7c8a50e540dfbe2e

私はこれでこの問題を解決しました

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

とセット

webPreferences: {
            nodeIntegration: false, 
        }

このようなnodeIntegration: true, imorotjQueryを使用している場合

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

への参照
https://github.com/electron/electron/issues/345

つまり、それは悪い問題のように思われるので、実際のエレクトロンに含めてみませんか？ たぶん、主要なJavaScriptライブラリをElectronに統合しますか？

ElectronアプリでjQueryを使用している場合、非常に間違っているか、少なくとも非効率的なことをしている可能性があります。

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

@drowlandsElectronにサードパーティのライブラリを含めるのは悪い考えのようです。 たとえば、更新ルーチンやバージョンの選択を想像してみてください。
@amhohoこれは、jQueryをrequireするか、上部の関数でそのinitコードを変更する必要があるためです- factory( global );だけを残します

ここ：

( 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 );
    }

私の場合、fetch / Promiseまたはxhrを介してライブラリをロードするので、ベンダーのライブラリのモジュールチェックを削除するこのルーチンがあります。
@RRorgあなたが言っていることは奇妙です

マーク

@kabalage上記の投稿の構成は

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

公式ドキュメント：
https://electronjs.org/docs/faq#i -can-not-use-jqueryrequirejsmeteorangularjs-in-electron
`` `