xterm.js isn't working with Next.JS #56241
-
SummaryI'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 informationOperating 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 farconst 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. ExampleNo response |
Beta Was this translation helpful? Give feedback.
Replies: 4 comments 5 replies
-
Update: I went out and made my own terminal but i will keep this discussion up for other people who have the same problem. |
Beta Was this translation helpful? Give feedback.
-
Now i actually need this to work so those who can help please do |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
I solved this in Discord |
Beta Was this translation helpful? Give feedback.
cc @Sanniv2002 @oh-joo-yeong
This is how I did:
If you exported the Terminal as default: