react-refresh-webpack-plugin icon indicating copy to clipboard operation
react-refresh-webpack-plugin copied to clipboard

Initializing react with hydrateRoot causes that app doesn't recover after an error

Open vavra7 opened this issue 2 years ago • 0 comments

I have configured webpack to support SSR. At first I implemented that according to example webpack-hot-middleware. Second attempt was following webpack-plugin-serve example.

In both cases the configuration worked flawlessly as far as I initiated react app with createRoot fce.

const container = document.getElementById('root-container');
const root = createRoot(container!);
root.render(<Root />);

In both cases the configuration failed to recover react app after 'ReferenceError' during development when I used hydrateRoot fce.

const container = document.getElementById('root-container');
hydrateRoot(container!, <Root />);

My last test was just to skip @pmmmwh/react-refresh-webpack-plugin and result was that application recovers after 'ReferenceError' even using hydrateRoot.

Please take a look at this since hydrateRoot fce is throwing an error during development like 'Hydration failed because the initial UI does not match what was rendered on the server.'. Using createRoot makes you blind to this kind of the error.

vavra7 avatar Feb 04 '23 17:02 vavra7