Mengapa saya mendapat ReferenceError: self is not Defined apabila saya mengimport pustaka klien?

Question

Saya buntu semasa cuba mencipta komponen xterm React dalam Next.js kerana saya tidak dapat mengatasi mesej ralat yang tidak pernah saya terima sebelum ini.

Saya cuba mengimport modul klien npm yang dipanggil xterm tetapi jika saya menambah baris import, apl akan ranap.

import { Terminal } from 'xterm'

Ralat membaca 服务器错误... ReferenceError: self is not Defined Kemudian paparkan kod ini sebagai Source

module.exports = require("xterm");

Dari beberapa penyelidikan yang saya lakukan, ini berkaitan dengan Webpack dan mungkin berguna jika perkara seperti ini dilakukan:

output: {
  globalObject: 'this'
}

Adakah anda tahu bagaimana untuk menyelesaikan masalah ini?

Answer 1

Sebab ralat ini berlaku ialah perpustakaan memerlukan API Web untuk berfungsi dan apabila Next.js pra-memaparkan halaman di sebelah pelayan.

Dalam kes anda, xterm 尝试访问服务器上不存在的window 对象。解决方案是避免在服务器上加载 xterm dan importnya secara dinamik supaya ia hanya dimuatkan pada bahagian pelanggan.

Dalam Next.js, terdapat pelbagai cara untuk mencapai perkara ini.

---

#1 dalam useEffect 内使用动态 import()

Ganti import 移至组件的 useEffect dan kemudian import perpustakaan secara dinamik dan tambah logik di dalamnya.

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

---

#2 Gunakan next/dynamic 与 ssr: false bersama

Buat komponen dan tambah xterm logik padanya.

// components/terminal-component
import { Terminal } from 'xterm'

function TerminalComponent() {
    const term = new Terminal()
    // Add logic around `term`
    return <></>
}

export default TerminalComponent

Kemudian import komponen secara dinamik apabila digunakan.

import dynamic from 'next/dynamic'

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

Sebagai alternatif, anda boleh menambah logik secara langsung apabila menggunakan next/dynamic perpustakaan import dinamik untuk mengelak daripada menjana fail tambahan.

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