Parcel: Preact HMR

[philipodev]

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

All config and code is available here: https://github.com/philipodev/examples/tree/master/preact

🤔 Expected Behavior

Like React HMR.

😯 Current Behavior

It appends the new version instead of replacing it.

💁 Possible Solution

https://github.com/developit/preact/issues/925 <-- i have tried this, as you can see in main.js but still appends instead of replacing.

🌍 Your Environment

| Software | Version(s)
| ---------------- | ----------
| Parcel | 1.2.0
| Node | 8.2.1
| npm | 5.5.1
| Operating System | Windows 10

[vinaypuppal]

@philipodev Hi, I also faced this issue but I solved it by passing mountNode.lastChild as last argument to render function. You can see my main.js config below (HMR is working with preact)

// my full main.js file
import { h, render } from 'preact';

import App from './components/app';

if (process.env.NODE_ENV === 'development') {
  // Enable preact devtools
  // eslint-disable-next-line import/no-unassigned-import
  require('preact/devtools');
}

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

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

// Hot Module Replacement
if (module.hot) {
  module.hot.accept();
}

So form preact API docs https://preactjs.com/guide/api-reference#-preact-render-

render(component, containerNode, [replaceNode])

If the optional replaceNode DOM node is provided and is a child of containerNode, Preact will update or replace that element using its diffing algorithm. Otherwise, Preact will append the rendered element to containerNode.

[philipodev]

@vinaypuppal thank you very much. this worked!
Is this a bug within preact and not returning the rendered node or is it some issue in parcels hmr you think?

[rawrmonstar]

@vinaypuppal When I use this fix, I still get one append, I would appreciate any ideas about why that is the case 😕

gif

index.js

import { h, render } from "preact";
import { isDev } from "./util/env";

import App from "./components/app";

if (isDev) {
  require("preact/debug");
}

const mountNode = document.getElementById("app");

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

// Hot Module Replacement
if (module.hot) {
  module.hot.accept();
}

Edit: OMG nevermind, my HTML was poorly formatted (I used a self closing <div id="app" />), which is apparently no good. Changing it to <div id="app"></div> fixed it.