Module () module anonyme défini ()

Je reçois cette erreur lorsque je parcoumes mon webapp pour la première fois (habituellement dans un navigateur avec un cache désactivé).

Erreur: Mismatched anonymous define () module: function (require) {

HTML :

<html> . . . <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> var require = { urlArgs: "v=0.4.1.32" }; </script> <script data-main="assets/js/main" src="assets/js/libs/require.js"></script> <script src="assets/js/ace/ace.js?v=0.4.1.32"></script> </body> </html> 

JS :

 $(function () { define(function (require) { // do something }); }); 

Quoi qu'il en soit, savez exactement cette erreur et pourquoi cela se produit-il?

Fichier source , une brève discussion à ce sujet dans la page des problèmes de Github

Comme AlienWebguy a déclaré, selon les documents, require.js peut exploser si

  • Vous avez une définition anonyme (" modules qui appellent define () sans ID de chaîne ") dans sa propre variable de script (je supposément qu'elles signifient n'importe où dans la portée globale)
  • Vous avez des modules contenant des noms contradictoires
  • Vous utilisez des plugins de chargeur ou des modules anonymes, mais n'utilisez pas l'optimiseur require.js pour les regrouper

J'ai eu ce problème tout en incluant des faisceaux construits avec browserify aux côtés des modules require.js. La solution était soit:

A. chargez les bundles autonomes non requis.js dans les tags de script avant require.js est chargé ou

B. chargez-les en utilisant require.js (au lieu d'une étiquette de script)

J'ai eu cette erreur parce que j'ai inclus le fichier requirejs avec d'autres librairies inclus directement dans une balise de script. Ces librairies (comme lodash) ont utilisé une fonction définie qui était conflictuelle avec la définition requise. Le fichier requirejs était chargé de manière asynchrone, de sorte que je soupçonne que la définition requise a été définie après la définition des autres bibliothèques, d'où le conflit.

Pour vous débarrasser de l'erreur, incluez tous vos autres fichiers js en utilisant requirejs.

Par les documents :

Si vous codez manuellement une étiquette de script en HTML pour charger un script avec un appel défini () anonyme, cette erreur peut se produire.

Aussi vu si vous codez manuellement une étiquette de script en HTML pour charger un script comportant quelques modules nommés, mais essayez de charger un module anonyme qui finit par avoir le même nom que l'un des modules nommés dans le script chargé par le manuel Tag de script codé.

Enfin, si vous utilisez les plugins de chargeur ou les modules anonymes (les modules appelant define () sans ID de chaîne), mais n'utilisez pas l'optimiseur d'exigences pour combiner les fichiers ensemble, cette erreur peut se produire. L'optimiseur sait comment nommer les modules anonymes correctement afin qu'ils puissent être combinés avec d'autres modules dans un fichier optimisé.

Pour éviter l'erreur:

  • Assurez-vous de charger tous les scripts qui appellent define () via l'API RequireJS. Ne codez pas manuellement les étiquettes de script en HTML pour charger des scripts qui ont défini () des appels dans eux.

  • Si vous codez manuellement une étiquette de script HTML, assurez-vous que cela ne comprend que les modules nommés et qu'un module anonyme qui aura le même nom que l'un des modules de ce fichier n'est pas chargé.

  • Si le problème est l'utilisation de plugins de chargeur ou de modules anonymes, mais l'optimiseur d'exigences n'est pas utilisé pour le regroupement de fichiers, utilisez l'optimiseur d'exigences.

Soyez conscient que certaines extensions de navigateur peuvent ajouter du code aux pages. Dans mon cas, j'avais un plugin "Emmet dans toutes les zones textuelles" qui a dérangé mes besoins. Assurez-vous qu'aucun code supplémentaire ne soit ajouté à votre document en l'inspectant dans le navigateur.

En commençant par les réactifs, j'ai rencontré le problème et, en tant que débutant, les documents peuvent aussi bien être écrit en grec.

Le problème que j'ai rencontré était que la plupart des exemples de débutants utilisaient «anonymous define» lorsque vous devriez utiliser un «ID de chaîne».

Anonyme définit

 define(function() { return { helloWorld: function() { console.log('hello world!') } }; }) define(function() { return { helloWorld2: function() { console.log('hello world again!') } }; }) 

Définir avec l'id de chaîne

 define('moduleOne',function() { return { helloWorld: function() { console.log('hello world!') } }; }) define('moduleTwo', function() { return { helloWorld2: function() { console.log('hello world again!') } }; }) 

Lorsque vous utilisez définir avec un identifiant de chaîne, vous éviterez cette erreur lorsque vous essayez d'utiliser les modules comme ceci:

 require([ "moduleOne", "moduleTwo" ], function(moduleOne, moduleTwo) { moduleOne.helloWorld(); moduleTwo.helloWorld2(); }); 

Les réponses existantes expliquent bien le problème, mais si l'inclusion de vos fichiers de script utilisant ou avant requireJS n'est pas une option simple en raison d'un code hérité, une solution de contournement légère est de supprimer les besoins de la portée de la fenêtre avant votre tag de script, puis de le réintroduire après les mots. Dans notre projet, cela est enveloppé derrière un appel de fonction côté serveur, mais effectivement, le navigateur voit ce qui suit:

  <script> window.__define = window.define; window.__require = window.require; window.define = undefined; window.require = undefined; </script> <script src="your-script-file.js"></script> <script> window.define = window.__define; window.require = window.__require; window.__define = undefined; window.__require = undefined; </script> 

Pas le plus soigné mais semble fonctionner et a sauvé beaucoup de réfractive.

De cette façon fonctionne pour moi:

Incluez d'autres javascipts avant d' inclure require.js . La façon sûre de le faire est d'inclure require.js dehors de la balise html:

 <html> <body> <script src="other/library.js"></script> <script> console.log("Some init script"); </script> </body> </html> <!-- require.js goes here --> <script data-main="main_app" src="path/to/require.js"></script>