xterm.js isn't working with Next.JS

[Khaogamermain01]

Summary

I'm currently trying to use xterm.js inside of my Next.JS project and I saw #22409 got theirs to work by importing dynamically but when I tried that it still didn't work. xterm.js is quite important for my project for getting docker container loggings so any help would be very appreciated.

Additional information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:53:44 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T8103
Binaries:
  Node: 16.16.0
  npm: 9.7.2
  Yarn: 1.22.11
  pnpm: 6.14.6
Relevant Packages:
  next: 13.5.4-canary.8
  eslint-config-next: 13.4.19
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

What i have tried so far

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

// I don't know how to write stuff in and out of the terminal because there wasn't any documentation about this at all.

Example

No response

[Khaogamermain01]

Update: I went out and made my own terminal but i will keep this discussion up for other people who have the same problem.

[Khaogamermain01]

Now i actually need this to work so those who can help please do

[devjiwonchoi]

Hi, didn't inspect much but from the top of my head: if you're using the app router, have you tried 'use client'?

[Sanniv2002]

Nope! this problem with xterm doesn't gets solved if we use 'use client' as well, I have tried importing it dynamically and even with as ssr: false, still did not solve this.

this is the error i'm getting

[Khaogamermain01]

I solved this in Discord

[Sanniv2002]

How? i am unable to join the channel

[oh-joo-yeong]

There is no Discord channel.
Can you tell me how you solved it?

[devjiwonchoi]

cc @Sanniv2002 @oh-joo-yeong

This is how I did:

// @/components/terminal.tsx
'use client'
export function Terminal() {
  return // ...
}

// page.tsx
'use client'
import dynamic from 'next/dynamic'

const Terminal = dynamic(
  async () => (await import('@/components/terminal')).Terminal, { ssr: false }
)

export default function Landing() {
  return <Terminal />
}

If you exported the Terminal as default:

const Terminal = dynamic(
  async () => (await import('@/components/terminal')).default, { ssr: false }
)

[Khaogamermain01]

Marked you as the answer since the Discord link didn't work.