Hot reloading preact with parcel, the missing doc

Today I was setting up a preact app with parcel as the bundler. Before I could even start building the app, I suddenly hit a snag. Whenever I made a change to my components, my changes were being appended to the html doc instead of being replaced.

It turns out parcel is not the issue, preact is. I went to their docs as any developer would. I found out their their render by default appends to the node specified. The preact render function accepts a third argument which is supposed to be the node to be replaced.

So to fix the appending problem, I needed to provide the third agrument.

import { h, render } from "preact";

const Happy = () => <div>Happy</div>;
const App = () => (
  <div>
    <Happy />
  </div>
);
const node = document.getElementById("root");

render(<App />, node, node.lastChild);

Now it behaves as expected. Maybe parcel should update their docs to include this. I wanted to make a pull request but their docs are not on github.

Comments

[Lewis Andrew Campbell]

Thanks so much for this post. I was having the exact same problem and it was driving me insane - I was convinced it had something to do with my .babelrc.