6

尝试在Next.js中创建一个xterm react 组件时，我遇到了困难，因为我无法克服以前从未收到过的错误消息。

我正在尝试导入一个名为 的 npm 客户端模块xterm，但如果我添加导入行，应用程序将崩溃。

import { Terminal } from 'xterm'

错误读取Server Error... ReferenceError: self is not defined 然后将这段代码显示为Source

module.exports = require("xterm");

根据我所做的一些研究，这与 Webpack 有关，如果完成这样的事情可能会有所帮助：

output: {
  globalObject: 'this'
}

你知道如何解决这个问题吗？

4

1 回答 1

21

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

在您的情况下，xterm尝试访问window服务器上不存在的对象。要修复它，您必须动态导入xterm，以便它仅在客户端加载。

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

#1 使用动态import()

将 移动import到您的组件的useEffect，然后动态导入库并在那里添加您的逻辑。

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

#2next/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
    }
)
于 2021-02-08T10:52:13.933 回答