How to disable SSR for XTerm

Answered

Khao (Ping on reply) posted this in #help-forum

2024-02-11T11:53:41.000Z

I have seen some people in the Github and here that had their xterm fixed by disabling ssr, but they didn't give a solution. This problem is quite important to us because we are making a Docker Container manager at which the terminal is quite important.

I have tried:

const DynamicTerminal = dynamic(() => import("xterm").then((a) => a.Terminal as any), { ssr: false });

Which gave us this error:

Unhandled Runtime Error
Error: Element type is invalid. Received a promise that resolves to: [object Object]. Lazy element type must resolve to a class or function.

So we are currently out of luck. Please help.

Answered by Hong

Downgrading the xterm to version 5.2.1 is the current workaround.

View full answer

10 Replies

Hong

2024-02-11T12:47:33.000Z

Here is an example:

page.tsx:

import dynamic from 'next/dynamic'

const XTerm = dynamic(() => import('./xterm'), {
  ssr: false
})

export default function Page() {
  return <XTerm />
}

xterm.tsx:

'use client'

import { useEffect, useRef } from 'react'
import { Terminal } from 'xterm'
import 'xterm/css/xterm.css'

export default function XTerm() {
  const xtermRef = useRef<Terminal>()
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (!ref.current) return

    if (!xtermRef.current) {
      xtermRef.current = new Terminal()
    }

    const xterm = xtermRef.current

    xterm.open(ref.current)
    xterm.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')

    return () => {
      xterm.dispose()
    }
  }, [])

  return <div ref={ref} />
}

Khao (Ping on reply)OP

2024-02-11T13:07:05.000Z

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'dimensions')

I got this error and I don't see any documentation from xterm about this

Any clue on what it might be?

Hong

2024-02-11T13:12:19.000Z

@Khao (Ping on reply) I got this too. It seems that useEffect runs twice under strict mode. I found that xterm.dispose() will run which causes this error. I don't know how to fix it. But it works in production (i.e. after building) since the useEffect runs once only in production.

Khao (Ping on reply)OP

2024-02-11T13:12:56.000Z

That is pretty bad. I really don't want to be building it every small change.

Hong

2024-02-11T13:14:53.000Z

Turning off strict mode can fix it, but I don't think it's a good way. Let me try again to see if there are any other solutions.