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

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?

@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.

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

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.

Update me when you do find something, thanks.

Thank you.

If you do find more work arounds then send it here for other people who are wondering the same about XTerm

Sorry for bumping in such an old thread, but it’s relatively high on the Google search results, and it's worth noting that apparently version 5.2.1 never handled new lines. I never saw that documented, but I guess it's worth noting now.

Updating to xterm version 5.3.0 (Current latest version as of deprecation ) and turning reactStrictMode to false should do the trick even though it isn't a good way.

If anyone still has new work arounds or forks that could be used, that would be very helpful.

New updates here: the @xterm/xterm works on their newest version 5.5.0 but reactStrictMode has to be set to false (Dev Environment). Should work fine when built.