Question

尝试在 Next.js 中创建一个 xterm 反应组件我被卡住了，因为我无法克服以前从未收到过的错误消息。

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

import { Terminal } from 'xterm'

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

module.exports = require("xterm");

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

output: {
  globalObject: 'this'
}

你知道如何解决这个问题吗？先感谢您！ ?

Answer 1

发生错误是因为 xterm 尝试访问在服务器端不可用的 window 对象。要解决此问题，您可以使用 xterm 动态导入 ssr: false，使其仅在客户端加载。

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

编辑：作为替代方案，您可以创建一个新组件，在其中导入 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
})

(Webpack) 当我尝试导入客户端库时，为什么会出现 ReferenceError: self is not defined in Next.js？

1 个答案: