代码之家 › 专栏 › 技术社区 › Ahmad Abdallah

在NextJS应用程序中使用Neovis.js时发生ReferenceError

neovis neo4j next.js reactjs javascript

0

Ahmad Abdallah · 技术社区 · 3 年前

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

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

import { Terminal } from 'xterm'

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

module.exports = require("xterm");

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

output: {
  globalObject: 'this'
}

你知道怎么解决这个问题吗?

0 回复 | 直到 4 年前

1

85

juliomalves 3 年前

出现此错误是因为库需要Web API才能工作,而当 Next.js pre-renders the page 在服务器端。

在您的情况下, xterm 尝试访问 window 服务器上不存在的对象。解决方案是避免加载 xterm 并动态导入,以便仅在客户端加载。

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

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

移动 import 到您的组件 使用效果 ,然后动态导入库并在其中添加逻辑。

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

作为 可供替代的 ,可以在使用动态导入库时直接添加逻辑 下一个/动态 以避免有额外的文件。

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

2

0

xuxu 2 年前

需要更换 self 具有 globalThis 看见

3

0

Pinqode 2 年前

我想获得默认导出,并发现使用 default 这样的属性:

const [doStuff, setDoStuff] = useState(false);

useEffect(() => {
 const exportFileAsPDF = async () => {
        const {default: html2pdf} = await import('html2pdf.js');

        if (typeof window === "undefined") return
        if (typeof document === "undefined") return

        if (content && html2pdf) {
           // use library
           HTML_CONTENT = ""
           pdfOptions = {}
           html2pdf().from(HTML_CONTENT).set(pdfOptions).save();
           setDoStuff(false)
          }
      }

    if (doStuff){
        exportFileAsPDF()
    }
}, [doStuff])

在NextJS应用程序中使用Neovis.js时发生ReferenceError

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

#2使用 next/dynamic 具有 ssr: false

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

#2使用 `next/dynamic` 具有 `ssr: false`