Electron: jQuery n'est pas défini

315

Problème: lors du développement à l'aide d'Electron, lorsque vous essayez d'utiliser un plugin JS qui nécessite jQuery, le plugin ne trouve pas jQuery, même si vous chargez dans le bon chemin à l'aide des balises de script.

Par exemple,

<body>
<p id="click-me">Click me!</p>
...
<script src="node_modules/jquery/dist/jquery.min.js"></script> //jQuery should be loaded now
<script>$("#click-me").click(() => {alert("Clicked")});</script>
</body>

L'exécution de ce code ci-dessus ne fonctionnerait pas. En fait, ouvrez DevTools, allez dans la vue Console et cliquez sur l' <p>élément. Vous devriez voir cela function $ is not definedou quelque chose à cet effet.

jquery electron

— Bruno Vaz
source

Pourquoi ne pas simplement utiliser la requirefonction Electron ?

762

Une solution IMO meilleure et plus générique:

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    

<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

Avantages

Fonctionne à la fois pour le navigateur et l'électron avec le même code
Résout les problèmes pour TOUTES les bibliothèques tierces (pas seulement jQuery) sans avoir à spécifier chacune
Construction de script / Pack Friendly (c'est-à-dire Grunt / Gulp tous les scripts dans vendor.js)
N'exige PAS node-integrationd'être faux

source ici

— Dale Harders
source

1

@fareednamrouti Oui, mais le point de cette solution était que vous n'avez pas à lister les bibliothèques tierces (ça marche!). Pratique lorsque vous importez de nombreuses bibliothèques (ou scripts auto-intégrés)

— Dale Harders

2

Merci! dans mon cas, cette solution fonctionne également pour les anciennes versions de d3 comme d3 v3 ou inférieures

— vents contraires

2

@DaleHarders Il s'avère que window.modulecommence par la même valeur que module, donc votre code ne fonctionne pas tout à fait comme prévu. La bonne façon de le faire est d'enregistrer moduleà la place dans une autre propriété de fenêtre (inutilisée), comme window.tempModule. Pour confirmer ce que je dis, essayez console.log(module)après votre dernière déclaration de le vérifier maintenant module === undefined.

— Lucio Paiva

1

@Lucio Nope. Nous devons enregistrer dans window.module car c'est là que les bibliothèques tierces l'attendent (environnement de navigateur). Je pense que vous confondez Node.js et les environnements de navigateur. Cette astuce est d'aider au développement afin que votre code puisse s'exécuter dans le navigateur ET nœud / électron sans aucune configuration supplémentaire. Il existe de nombreuses autres façons de le faire, mais c'est à mon humble avis le plus simple.

— Dale Harders

1

C'est problématique avec CSP - pas de scripts en ligne

— Trevor

121

Comme vu dans https://github.com/atom/electron/issues/254, le problème est dû à ce code:

if ( typeof module === "object" && typeof module.exports === "object" ) {
  // set jQuery in `module`
} else {
  // set jQuery in `window`
}

Le code jQuery "voit" que son fonctionnement dans un environnement CommonJS et ignore window.

La solution est vraiment simple , au lieu de charger jQuery <script src="...">, vous devez charger comme ceci:

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

Remarque: le point avant le chemin est obligatoire , car il indique qu'il s'agit du répertoire courant. Aussi, pensez à charger jQuery avant de charger tout autre plug - in qui en dépend .

— Bruno Vaz
source

1

Merci, mais j'ai un système créé par yeoman avec angular. Grunt prend toutes mes dépendances de bower et les intègre dans un fichier vendor.js. Comment puis-je charger jquery, corriger avec votre ligne et continuer avec les autres dépendances de bower qui ont besoin de jquery?

— bluesky777

Je ne comprends pas, les vendor.js ont jquery dedans? Si c'est le cas, vous pouvez charger le vendor.js avec cette fenêtre. $ Method, afaik.

— Bruno Vaz

Quelques commentaires plus loin dans le problème lié, il existe une solution encore meilleure: 'node-integration': falseen option pour BrowserWindow.

— Boldewyn

6

Cela n'affecte-t-il pas d'autres choses?

— Bruno Vaz

53

Une autre façon d'écrire <script>window.$ = window.jQuery = require('./path/to/jquery');</script>est:

<script src="./path/to/jquery" onload="window.$ = window.jQuery = module.exports;"></script>

— Aaleks
source

J'ai trouvé cela comme la meilleure réponse car je peux toujours utiliser CDN avec! Et pas besoin d'écraser quoi que ce soit.

— patotoma

53

réponse à la FAQ électronique:

http://electron.atom.io/docs/faq/

Je ne peux pas utiliser jQuery / RequireJS / Meteor / AngularJS dans Electron.

En raison de l'intégration Node.js d'Electron, il existe des symboles supplémentaires insérés dans le module de type DOM, les exportations, nécessitent. Cela provoque des problèmes pour certaines bibliothèques car elles souhaitent insérer les symboles portant les mêmes noms.

Pour résoudre ce problème, vous pouvez désactiver l'intégration des nœuds dans Electron:

// Dans le processus principal.

let win = new BrowserWindow({  
 webPreferences: {
 nodeIntegration: false   } });

Mais si vous souhaitez conserver les capacités d'utilisation des API Node.js et Electron, vous devez renommer les symboles de la page avant d'inclure d'autres bibliothèques:

<head> 
<script> 
window.nodeRequire = require; 
delete window.require;
delete window.exports; delete window.module; 
</script> 
<script type="text/javascript" src="jquery.js"></script> 
</head>

— Fran6
source

@ Fran6 que puis-je faire si je charge une page externe? :(

— georgiosd

Cela a fonctionné, mais après cela, mon application Electron ne se fermait pas - c'est-à-dire que je ne pouvais pas quitter la page Web.

— tale852150

34

Je viens de rencontrer ce même problème

npm install jquery --save

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

travaillé pour moi

— Dhaval Chauhan
source

C'est exactement ce que dit ma réponse d'origine.

— Bruno Vaz

Salut comment faire de même avec materialize.min.js cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/… . .. quelque chose comme ceci <script> window.Materialize = window.Materialize = require ('Materialize'); </script> ??? quelqu'un peut-il aider

— Makjb lh

@BrunoVaz cette réponse est plus propre :)

— moeiscool

20

Vous pouvez mettre des node-integration: falseoptions internes sur BrowserWindow.

par exemple: window = new BrowserWindow({'node-integration': false});

— Murilo Feres
source

4

C'est une bonne solution pour les utilisateurs qui n'ont pas besoin d'intégration de nœuds.

— Adam Szmyd

C'est génial, fonctionne parfaitement pour moi. Merci @Murilo Feres. Quelles sont les possibilités des options d'intégration de nœuds?

— Ahesanali Suthar

3

ne fonctionne pas @ 1.4, veuillez utiliser: let win = new BrowserWindow ({webPreferences: {nodeIntegration: false}})

— holly le

14

Une solution agréable et propre

Installez jQuery à l'aide de npm. ( npm install jquery --save)
Utilise le: <script> let $ = require("jquery") </script>

— adgelbfish
source

8

Je fais face au même problème et cela a fonctionné pour moi!

Installer jQuery à l' aide de npm

$ npm install jquery

Incluez ensuite jQuery de l'une des manières suivantes.

Utilisation d'une balise de script

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

Utiliser Babel

import $ from 'jquery';

Utilisation de Webpack

const $ = require('jquery');

— Abraham Hernandez
source

6

<script>
  delete window.module;
</script>

avant votre importation jquery et vous êtes prêt à partir. plus d'infos ici .

— Sagiv Ofek
source

5

Je pense que je comprends votre lutte, je l'ai résolu un peu différemment.J'ai utilisé le chargeur de script pour mon fichier js qui comprend jquery.Le chargeur Script prend votre fichier js et le joint en haut de votre fichier vendor.js, il a fait la magie pour moi.

https://www.npmjs.com/package/script-loader

après avoir installé le chargeur de script, ajoutez-le à votre fichier de démarrage ou d'application.

import 'script! path / your-file.js';

— Mertcan Diken
source

4

ok, voici une autre option, si vous voulez inclure un parent ...

<script> window.$ = window.jQuery = require('./assets/scripts/jquery-3.2.1.min.js') </script>

— aestrro
source

3

Si vous utilisez Angular2, vous pouvez créer un nouveau fichier js avec ce code:

// jquery-electron.js

if ((!window.jQuery || !window.$) && (!!module && !!module.exports)) {
      window.jQuery = window.$ = module.exports;
}

et mettez-le juste après le chemin jquery, dans .angular-cli.json:

"scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "assets/js/jquery-electron.js",
    ...
    ...
]

— Max
source

3

im bâtiment et Angular App avec électron, ma solution était la suivante:

index.html

<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Donc, Jquery est chargé à partir de angular.json si sur le navigateur, sinon s'il s'agit d'une application construite par électrons, elle nécessitera un module à la place.

Si vous souhaitez importer jquery dans index.html au lieu d'importer depuis angular.json, utilisez la solution suivante:

<script src="path/to/jquery"></script>
<script>
    if ( typeof module === "object" && typeof module.exports === "object" ) {
      window.$ = window.jQuery = require('jquery');
    }
</script>

— Tombe de Kuza
source

2

travaillé pour moi en utilisant le code suivant

var $ = require('jquery')

— Adeojo Emmanuel IMM
source

2

1.Installez jQuery à l'aide de npm.

npm install jquery --save

2.

<!--firstly try to load jquery as browser-->
<script src="./jquery-3.3.1.min.js"></script>
<!--if first not work. load using require()-->
<script>
  if (typeof jQuery == "undefined"){window.$ = window.jQuery = require('jquery');}
</script>

— Alexey Kolotsey
source

2

Cela fonctionne pour moi.

<script languange="JavaScript">
     if (typeof module === 'object') {window.module = module; module = undefined;}
</script>

Choses à considérer:

1) Mettez ceci dans la section juste avant </head>

2) Inclure Jquery.min.js ou Jquery.js juste avant la </body>balise

— Vishal Goyal
source

0

vous pouvez essayer le code suivant:

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

— shuoGG
source

0

Pour ce problème, utilisez JQuery et d'autres js comme vous utilisez dans la page Web. Cependant, Electron a une intégration de nœuds, il ne trouvera donc pas vos objets js. Vous devez définir module = undefinedjusqu'à ce que vos objets js soient chargés correctement. Voir l'exemple ci-dessous

<!-- Insert this line above local script tags  -->
<script>if (typeof module === 'object') {window.module = module; module = 
undefined;}</script>

<!-- normal script imports etc  -->
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>    

<!-- Insert this line after script tags -->
<script>if (window.module) module = window.module;</script>

Après avoir importé comme indiqué, vous pourrez utiliser le JQueryet d'autres choses en électron.

— Kiran Maniya
source

0

Installez simplement Jquery avec la commande suivante.

npm install --save jquery

Après cela, veuillez mettre la ligne belew dans le fichier js que vous souhaitez utiliser Jquery

let $ = require('jquery')

— Milan Hirpara
source