国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

社群

學習

工具庫

AI工具

休閒

繁體中文

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

P粉214089349 2023-10-21 12:53:53

917

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

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

import { Terminal } from 'xterm'

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

module.exports = require("xterm");

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

output: {
  globalObject: 'this'
}

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

P粉214089349

全部回覆(1)

P粉9589860702023-10-22 10:48:55 1樓

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

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

在 Next.js 中，有多種方法可以實現(xiàn)此目的。

#1 在 `useEffect` 內(nèi)使用動態(tài) `import()`

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

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

然後在使用時動態(tài)匯入該元件。

import dynamic from 'next/dynamic'

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

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

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