クライアント ライブラリをインポートすると、ReferenceError: self is not Defined が発生するのはなぜですか?

Question

Next.js で xterm React コンポーネントを作成しようとしているときに、これまでに受け取ったことのないエラー メッセージが表示されて立ち往生しています。

xterm という npm クライアント モジュールをインポートしようとしていますが、インポート行を追加するとアプリケーションがクラッシュします。

リーリー

読み取りエラー サーバー エラー... 参照エラー: self が定義されていません 次に、このコードを Source

として表示します。 リーリー

私が行ったいくつかの調査によると、これは Webpack に関係しており、次のようなことが行われると役立つかもしれません:

リーリー

この問題の解決方法を知っていますか?

Answer 1

このエラーは、ライブラリが動作するために Web API が必要であり、Next.js がサーバー側でページ を事前レンダリングするときに発生します。

あなたの場合、xterm はサーバー上に存在しない window オブジェクトにアクセスしようとしています。解決策は、#xxterm をサーバーにロードするのを避け、クライアントにのみロードされるように動的にインポートすることです。

Next.js では、これを実現する方法が複数あります。

---

#1

useEffect 内で動的 import() を使用する

import

をコンポーネントの useEffect に移動し、ライブラリを動的にインポートしてそこにロジックを追加します。 リーリー

#2

---

next/dynamic

を ssr: false で使用します コンポーネントを作成し、

xterm

ロジックをそれに追加します。 リーリー 次に、使用時にコンポーネントを動的にインポートします。

リーリー

代替

として、

next/dynamicを使用してライブラリを動的にインポートするときにロジックを直接追加し、余分なファイルの生成を避けることができます。 リーリー