web-dev-qa-db-fra.com

Module define () anonyme anonyme

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

Erreur: Module define () anonyme anonyme: 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
    });
});

Quelqu'un sait exactement ce que cette erreur signifie et pourquoi cela se produit?

fichier source , un brève discussion à ce sujet dans la page des problèmes de github

javascriptjqueryrequirejs
113
Adonis K. Kakoulidis

Comme AlienWebguy l’a dit, selon la documentation, require.js peut exploser si

  • Vous avez une définition anonyme (" modules qui appellent define () sans ID de chaîne ") dans sa propre balise de script (je suppose qu’ils signifient en réalité portée globale)
  • Vous avez des modules qui ont des noms en conflit
  • Vous utilisez des plugins de chargeur ou des modules anonymes, mais n'utilisez pas l'optimiseur de require.js pour les regrouper.

J'ai eu ce problème en incluant des bundles construits avec browserify avec les modules require.js. La solution était soit:

A. chargez les ensembles autonomes non-require.js dans des balises de script avant que require.js soit chargé, ou

B. chargez-les à l'aide de require.js (au lieu d'une balise de script)

133
B T

J'ai eu cette erreur parce que j'ai inclus le fichier requirejs avec d'autres bibliothèques incluses directement dans une balise de script. Ces bibliothèques (comme lodash) utilisaient une fonction define en conflit avec require's define. Le fichier requirejs se chargeait de manière asynchrone, donc je suppose que le paramètre require a été défini après la définition par les autres bibliothèques, d'où le conflit.

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

13
eloone

En commençant à réagir, j’ai rencontré le problème et, en tant que débutant, le docs peut aussi bien avoir été écrit en grec.

Le problème que j'ai rencontré est que la plupart des exemples de débutant utilisent "anonymous définit" quand 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 la chaîne id 

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éfinissez avec un identifiant de chaîne , vous éviterez cette erreur en essayant d'utiliser les modules de la manière suivante:

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

Selon le docs :

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

Voir également si vous codez manuellement une balise de script en HTML pour charger un script contenant quelques modules nommés, mais essayez ensuite de charger un module anonyme dont le nom est identique à celui de l'un des modules nommés du script chargé manuellement. balise de script codé.

Enfin, si vous utilisez les plugins de chargeur ou les modules anonymes (modules qui appellent define () sans ID de chaîne) mais n'utilisez pas l'optimiseur RequireJS pour combiner des fichiers, cette erreur peut se produire. L'optimiseur sait comment nommer correctement les modules anonymes afin de pouvoir les combiner avec d'autres modules dans un fichier optimisé.

Pour éviter l'erreur:

  • Veillez à charger tous les scripts qui appellent define () via l'API RequireJS. Ne codez pas manuellement les balises de script en HTML pour charger des scripts contenant des appels define ().

  • Si vous codez manuellement une balise de script HTML, assurez-vous qu'elle n'inclut que les modules nommés et qu'un module anonyme portant le même nom que l'un des modules de ce fichier n'est pas chargé.

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

10
AlienWebguy

Sachez que certaines extensions de navigateur peuvent ajouter du code aux pages. Dans mon cas, j’avais un plug-in "Emmet dans tous les textareas" qui a tout gâché avec mes requireJs. Assurez-vous qu'aucun code supplémentaire n'est ajouté à votre document en l'inspectant dans le navigateur.

5
Vector

Les réponses existantes expliquent bien le problème, mais si inclure vos fichiers de script avec ou avant requireJS n’est pas une option facile en raison du code hérité, une solution de contournement légèrement hacky consiste à supprimer require de la portée de la fenêtre avant votre balise de script, puis à le rétablir après mot. Dans notre projet, cela est encapsulé derrière un appel de fonction côté serveur, mais le navigateur voit effectivement 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 mieux mais semble fonctionner et a économisé beaucoup de réfraction.

4
jcbdrn

Ou vous pouvez utiliser cette approche.

  • Ajoutez require.js dans votre base de code
  • puis chargez votre script via ce code

<script data-main="js/app.js" src="js/require.js"></script>

Ce qu'il va faire va charger votre script après le chargement de require.js.

1
Umar Asghar