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.
Top comments (1)
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.