Uncaught clientLoader errors in React 18 (specific to presence of useEffect adding/removing script in the root.tsx layout export)

[gundam-wing]

I'm using React Router as a...

framework

Reproduction

reproduction: https://stackblitz.com/edit/github-4zctv3wf?file=app%2Froot.tsx

I've run into an odd issue using react-router framework mode with react 18 (I also noticed the issue does not seem to be present in 19). If I have the following component in my root.tsx Layout export,

function TestScript() {
  useEffect(() => {
    const script = document.createElement("script");
    document.head.appendChild(script)
    return () => {
      if (script) {
        document.head.removeChild(script);
      }
    }
  }, []);
  return null;
};

And then a clientLoader throws an error, rather than displaying the root ErrorBoundary, I cycle through error messages in the browser console and the app becomes unresponsive.

demo_rr.mov

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.20.3 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 10.2.3 - /usr/local/bin/npm
  pnpm: 8.15.6 - /usr/local/bin/pnpm
npmPackages:
  @react-router/dev: * => 7.2.0 
  @react-router/node: * => 7.2.0 
  @react-router/serve: * => 7.2.0 
  react-router: * => 7.2.0 
  vite: ^6.0.11 => 6.1.1

Used Package Manager

npm

Expected Behavior

When an Error occurs in the clientLoader, the Error should be caught by the root.tsx ErrorBoundary and display the ErrorBoundary jsx.

Actual Behavior

When an Error occurs in the clientLoader, a loop of errors prints in the console and the application becomes unresponsive.

[timdorr]

This isn't a React Router bug. Your TestScript component is causing the issue here.

I was able to get the error to stop looping by adding a breakpoint. The error you're getting is Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. which is because your check for the script node's existence will always return true, even if the node is no longer in the DOM tree. This fixes that bug:

if (document.head.contains(script)) {
  document.head.removeChild(script);
}