當我匯入客戶端程式庫時，為什麼會出現 ReferenceError: self is not Defined ？

Question

嘗試在 Next.js 中建立 xterm React 元件時，我陷入了困境，因為我無法克服以前從未收到過的錯誤訊息。

我正在嘗試導入一個名為 xterm 的 npm 客戶端模組，但如果我新增導入行，應用程式就會崩潰。

import { Terminal } from 'xterm'

錯誤讀取 伺服器錯誤... ReferenceError: self is not Defined# 然後將這段程式碼顯示為 Source

#

module.exports = require("xterm");

根據我所做的一些研究，這與 Webpack 有關，如果完成這樣的事情可能會有所幫助：

output: {
  globalObject: 'this'
}

你知道如何解決這個問題嗎？

Answer 1

出現此錯誤的原因是該庫需要 Web API 才能運作，而當 Next.js 在伺服器端預先渲染頁面。

在您的情況下，xterm 嘗試存取伺服器上不存在的window 物件。解決方案是避免在伺服器上載入 xterm 並動態導入它，以便僅在客戶端載入它。

在 Next.js 中，有多種方法可以實現此目的。

---

#1 在 useEffect 內使用動態 import()

將 import 移至元件的 useEffect，然後動態匯入庫並在其中新增邏輯。

useEffect(() => {
    const initTerminal = async () => {
        const { Terminal } = await import('xterm')
        const term = new Terminal()
        // Add logic with `term`
    }
    initTerminal()
}, [])

---

#2 將 next/dynamic 與 ssr: false 一起使用

建立一個元件，在其中新增 xterm 邏輯。

// components/terminal-component
import { Terminal } from 'xterm'

function TerminalComponent() {
    const term = new Terminal()
    // Add logic around `term`
    return <></>
}

export default TerminalComponent

然後在使用時動態匯入該元件。

import dynamic from 'next/dynamic'

const TerminalComponent = dynamic(() => import('<path-to>/components/terminal-component'), {
    ssr: false
})

作為替代方案，您可以在使用 next/dynamic 動態匯入庫時直接新增邏輯，以避免產生額外的檔案。

import dynamic from 'next/dynamic'

const Terminal = dynamic(
    {
        loader: () => import('xterm').then((mod) => mod.Terminal),
        render: (props, Terminal) => {
            const term = new Terminal()
            // Add logic with `term`
            return <></>
        }
    },
    {
        ssr: false
    }
)