Parcel: HMR with reacts appends a new app instance instead of replace the current

[brielov]

I have a parcel + react + css modules project. Whenever I save a file, the entire application gets re-rendered and appended to the #root container instead of replacing the whole thing.

This is what my index.js file looks like:

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { ApolloProvider } from 'react-apollo';
import './index.css';
import App from './app';
import client from './apollo-client';

ReactDOM.createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Router>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </Router>
  </StrictMode>,
);

This is what it looks like when I save the same file three times.

What am I doing wrong?

[mischnic]

Parcel's HMR simply reruns the code, it seems like ReactDOM.createRoot(document.getElementById('root')).render doesn't like that.

[brielov]

@mischnic Ok, thanks for the quick answer. So I've managed to solve it like this:

const rootNode = document.getElementById('root');

while (rootNode.lastChild) {
  rootNode.removeChild(rootNode.lastChild);
}

ReactDOM.createRoot(rootNode).render(
  <StrictMode>
    <Router>
      <ApolloProvider client={client}>
        <App />
      </ApolloProvider>
    </Router>
  </StrictMode>,
);

[pronevich]

@DeMoorJasper possibly this issue should be reopened. Parcel must support new react async mode (ReactDOM.createRoot)

[karansapolia]

I would like to take this up. First issue here, would really appreciate if anyone could give me some pointers and direction.

[karansapolia]

Pinging again, if any participant would like to guide through. I wish to get started on this at the earliest :smiley:

[mischnic]

@karansapolia I wouldn't really consider this a bug in parcel itself, it's rather a side effect of how the hot module reloading works (and I don't really see how this can be fixed without being specific to react - and createRoot isnt even documented in the react api?)

I would recommend taking a look at a different issue.

[karansapolia]

@mischnic Thank you for the quick reply. If that's the case, sure I'll move to other issues.