web-dev-qa-db-fra.com

module.exports "Le module n'est pas défini"

Donc, j'utilise RequireJS et React, essayant de charger un composant tiers, qui a été installé avec:

npm install react-autocomplete

La structure est ici: https://github.com/rackt/react-autocomplete/tree/master/lib

Maintenant, j'ai un fichier main.js, lancé lors du chargement de requireJS, qui ressemble à ceci:

require.config({
paths: {
      "react" : "react/react",
      "jsx-transformer" : "react/JSXTransformer",
      "react-autocomplete" : "node_modules/react-autocomplete/lib/main"
    }
});

require(["react"], function(react) {
    console.log("React loaded OK.");
});

require(["jsx-transformer"], function(jsx) {
    console.log("JSX transformer loaded OK.");
});

require(['react-autocomplete'], function (Autocomplete) {
    console.log("React autocomplete component loaded OK.");
    var Combobox = Autocomplete.Combobox;
    var ComboboxOption = Autocomplete.Option;
    console.log("Autocomplete initiated OK");
 });

Maintenant, tout se charge bien, mais la troisième instruction require lance un "module n'est pas défini", pour le fichier main.js dans le composant tiers, qui ressemble à ceci:

module.exports = {
  Combobox: require('./combobox'),
  Option: require('./option')
};

J'ai lu à ce sujet que cela avait à voir avec le fait que j'essaie d'exiger un module de style CommonJS, mais je ne peux pas comprendre comment le réparer par moi-même, car je suis nouveau dans ce domaine.

Quelqu'un at-il un exemple clair sur la façon dont je pourrais contourner cela?

javascriptrequirejsreactjscommonjs
23
joakimnorberg

RequireJS ne peut pas charger les modules CommonJS tels quels. Cependant, vous pouvez leur apporter une modification minimale pour les charger. Vous devez les envelopper dans un appel define comme ceci:

define(function (require, exports, module) {

  module.exports = {
    Combobox: require('./combobox'),
    Option: require('./option')
  };

});

Si vous avez un tas de modules que vous devez convertir, ou si vous utilisez une bibliothèque tierce écrite dans le modèle CommonJS et que vous souhaitez la convertir dans le cadre d'un processus de construction, vous pouvez utiliser r.js pour effectuer la conversion pour vous.

28
Louis

Le problème est que requireJS ne prend pas en charge les modules CommonJS uniquement AMD. Donc, si la bibliothèque tierce ne prend pas en charge AMD, vous devrez passer par quelques cerceaux pour le faire fonctionner.

Si vous avez l'option, je suggère d'utiliser browserify ou webpack pour le chargement du module car ce sont les outils que la majorité de la communauté React a choisis et pratiquement tous les tiers réagissent les composants sont publiés sur npm en tant que modules CommonJS.

6
Brandon Pugh