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

Question

Next.js で xtermReact コンポーネントを作成しようとすると、これまでに受け取ったことのないエラー メッセージが表示されて立ち往生します。 xterm という npm クライアント モジュールをインポートしようとしていますが、インポート行を追加するとアプリケーションがクラッシュします。 import{ターミナル}from'xterm' エラーはサーバー エラーを読み取ります...ReferenceError:selfisnotDefined は、このコードを Sourcemodule.exports= として表示します

P粉958986070 · Answer

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

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

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

#1

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

import

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

#2

next/dynamic

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

xterm

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

リーリー

代替

として、

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

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

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

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

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