DEV Community

Cover image for Hot reloading preact with parcel, the missing doc
Sadick
Sadick

Posted on

5 3

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.

gif

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);

Enter fullscreen mode Exit fullscreen mode

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.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (1)

Collapse
 
lewisandrewcampbell profile image
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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

đź‘‹ Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay