[解決済み】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
を使用すると、変換を行うことができます。
関連
-
[解決済み】エラー:リクエストのエンティティが大きすぎる
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み] URLを新しいタブで開く(新しいウィンドウではない)
-
[解決済み] JavaScriptで変数が存在するか(定義されているか/初期化されているか)をチェックする
-
[解決済み] Node.jsのmodule.exportsの目的と使い方を教えてください。
-
[解決済み] Node.jsのmodule.exportsとexportsの比較
-
[解決済み] Babel 6 regeneratorRuntimeが定義されていません。
-
[解決済み】JavaScriptで定義されていない変数を確認する方法
-
[解決済み】CommonJsモジュールシステムのmodule.exportsとexportsの違いについて
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Facebook Graph API のクエリで with=location を使用すると "Uncaught (in promise) undefined" というエラーが発生する。
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】SecurityError: オリジンを持つフレームがクロスオリジンフレームにアクセスするのをブロックした
-
[解決済み】webpack-dev-serverにリモート接続すると、「Invalid Host header」というメッセージが表示されます。
-
[解決済み】webpack: モジュールが見つかりません。Error: 解決できない(相対パスで)
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】npm install --legacy-peer-deps は具体的に何をするのですか?どんなときに推奨されるのか/どんな使用例が考えられるのか?
-
[解決済み】Jestが予期しないトークンに遭遇した