You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Do you have any idea what I could be doing wrong in my wrapper component? It's a very thin wrapper, so I feel the issue is probably related to my usage of XTerm and not React-specific.
The component source and errors are below:
Component source
app/components/XTerm.tsx
'use client';importReact,{useEffect,useRef}from'react';import'@xterm/xterm/css/xterm.css';// Import addons// https://github.com/xtermjs/xterm.jsimport{Terminal}from'@xterm/xterm';// https://github.com/xtermjs/xterm.js/tree/master/addons/addon-fitimport{FitAddon}from'@xterm/addon-fit';// https://github.com/xtermjs/xterm.js/tree/master/addons/addon-web-linksimport{SearchAddon}from'@xterm/addon-search';// https://github.com/xtermjs/xterm.js/tree/master/addons/addon-imageimport{WebLinksAddon}from'@xterm/addon-web-links';// https://github.com/xtermjs/xterm.js/tree/master/addons/addon-searchimport{ImageAddon}from'@xterm/addon-image';constXTerm=()=>{constterminalRef=useRef(null);constterminal=useRef(newTerminal());useEffect(()=>{// ComponentDidMountif(terminalRef.current){constfitAddon=newFitAddon();constsearchAddon=newSearchAddon();constwebLinksAddon=newWebLinksAddon();constimageAddon=newImageAddon({pixelLimit: 16777216});// Set up addonsterminal.current.loadAddon(fitAddon);terminal.current.loadAddon(searchAddon);terminal.current.loadAddon(webLinksAddon);terminal.current.loadAddon(imageAddon);// Attach the terminal to the divterminal.current.open(terminalRef.current);fitAddon.fit();// Example outputterminal.current.writeln('Hello world');}// ComponentWillUnmountreturn()=>terminal.current.dispose();// Cleanup// Empty dependency array, to only run on mount and cleanup on unmount},[]);return<divref={terminalRef}style={{height: '300px',width: '600px'}}/>;};exportdefaultXTerm;
X node_modules/@xterm/addon-fit/lib/addon-fit.js (1:196) @ eval
X ReferenceError: self is not defined
at __webpack_require__ (/home/projects/stackblitz-starters-6ssv2a/.next/server/webpack-runtime.js:33:42)
at eval (./app/components/XTerm.tsx:12:74)
at (ssr)/./app/components/XTerm.tsx (/home/projects/stackblitz-starters-6ssv2a/.next/server/app/page.js:151:1)
at __webpack_require__ (/home/projects/stackblitz-starters-6ssv2a/.next/server/webpack-runtime.js:33:42)
I have a minimal reproduction here, where you can see some issues in the console and client that appear, apparently related to the usage of
addon-fit
.https://stackblitz.com/edit/stackblitz-starters-6ssv2a?file=app%2Fcomponents%2FXTerm.tsx
Do you have any idea what I could be doing wrong in my wrapper component? It's a very thin wrapper, so I feel the issue is probably related to my usage of XTerm and not React-specific.
The component source and errors are below:
Component source
app/components/XTerm.tsx
app/page.tsx
Errors
In the terminal:
In the client:
The text was updated successfully, but these errors were encountered: