1

I migrated from cra to vite and now have the this problem:

When hmr is triggered, or when I visit another page (sometimes), the page goes blank and I get many errors:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

The above error occurred in the <Fragment> component:

The above error occurred in the <StrictMode> component:

Also:

Warning: You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.

However, I call createRoot only once in main.tsx file.

I use react-router-dom: version "^6.4.2".

I see the removeChild error after build too, unfortunately.

What did I wrong during the migration process?

vbpkzxczhbdgwrr
  • 81
  • 5

1 Answers1

1

This appears to be down to the highest component in the app not being 'Fast Refreshable'. Here is some info from the vite docs & an eslint plugin to help point out failures in the code.

Previously my app was set up like so:

const ContextWrappers = ({chidlren}) => (
   <SomeContextProvider>{chidlren}</SomeContextProvider> 
)

const App = () => (
   <div className="mega-app">
     <ContextWrappers>
         <YourSexyAppCode />
     </ContextWrapper>
   </div>

)

root.render(
  <App />
);

As this is all in one file, with no export, it couldn't be reloaded, so anything triggering the reload of these files produced the error you are experiencing.

Moving context and app into separate files resolved the issue for me.

Bonus, I also found refreshing sometimes threw off the WebSocket connection for HMR so added a static port to my config, as outlined here:

  hmr: { clientPort: 3000 },
  origin: 'https://localhost:3000',
Chilly
  • 36
  • 2