1. ホーム
  2. javascript

[解決済み】module.exports "モジュールが定義されていません"

2022-02-07 06:12:19

質問

RequireJSとReactを使用していて、サードパーティのコンポーネントをロードしようとしています。

npm install react-autocomplete

構成はこちらです。 https://github.com/rackt/react-autocomplete/tree/master/lib

これで、requireJSがロードされたときに開始されるmain.jsファイルは、次のようなものになりました。

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

さて、すべて問題なく読み込まれましたが、3つ目の require 文で、サードパーティ製コンポーネントの main.js ファイルに対して "module is not defined" がスローされ、次のようになります。

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

これは、私がCommonJSスタイルのモジュールを要求しようとしていることと関係があるということを読みましたが、私は初めてなので、自分で修正する方法を見つけることができません。

どうすれば回避できるのか、わかりやすい例をご存知の方はいらっしゃいますか?

どのように解決するのですか?

RequireJSはCommonJSのモジュールをそのままでは読み込めません。しかし、それらを読み込むための最小限の修正が可能です。そのためには、モジュールを define の呼び出しはこのようなものです。

define(function (require, exports, module) {

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

});

変換したいモジュールがたくさんある場合や、CommonJSパターンで書かれたサードパーティライブラリを使用していて、ビルドプロセスの一部として変換したい場合などは r.js を使用すると、変換を行うことができます。