Uncaught TypeError: Cannot read properties of null (reading 'removeChild') in XTerm component with Next.js 15.2.2 and React 19.0.0

[franc1sjacob]

I'm encountering an issue where I get a nonstop error when saving changes in the component where the XTerm terminal component is used. The error message is:

react-dom-client.development.js:11457 Uncaught TypeError: Cannot read properties of null (reading 'removeChild')

The issue occurs whenever I make any changes and save the component containing the XTerm component. The error prevents proper rendering and causes the app to loop.

My implementation:

"use client";

import { FitAddon } from "@xterm/addon-fit";
import { XTerm } from "react-xtermjs";

const Terminal = () => {
  const fitAddon = new FitAddon();

  return (
    <XTerm
      addons={[fitAddon]}
      options={{ fontSize: 12 }}
      style={{ width: "100%", height: "100%" }}
    />
  );
};

export default Terminal;

Using the component:

const Terminal = dynamic(() => import("./terminal"), {
  ssr: false,
  loading: () => <div>Loading terminal...</div>,
});