为什么在导入客户端库时收到 ReferenceError： self is not defined？

发生此错误的原因是库需要 Web API 才能工作，当 Next.js 在服务器端预呈现页面时，这些 API 不可用。

在本例中，尝试访问服务器上不存在的对象。解决方案是避免在服务器上加载并动态导入它，以便它只在客户端加载。xtermwindowxterm

在 Next.js 中，有几种方法可以实现这一点。

#1 在内部使用动态import()useEffect

将 移动到组件的 ，然后动态导入库并在其中添加逻辑。importuseEffect

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

#2 使用next/dynamicssr: 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
    }
)