[GH-ISSUE #163] Root: Cannot read property 'setChild' of undefined #104

New issue

Closed

opened 2026-05-05 11:42:28 -06:00 by gitea-mirror · 0 comments

gitea-mirror commented

2026-05-05 11:42:28 -06:00

Owner

Originally created by @mischnic on GitHub (Jul 6, 2018).
Original GitHub issue: https://github.com/kusti8/proton-native/issues/163

Yes, this is an uncommon situation, but needed for hot reloading. A workaround would be fine as well.

[HMR] TypeError: Cannot read property 'setChild' of undefined
    at Root.removeChild (.../proton-native/bin/components/DesktopComponent.js:83:36)
    at removeChildFromContainer (.../proton-native/bin/reconciler/index.js:82:20)
    at unmountHostComponents (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6816:9)
    at commitDeletion (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6863:5)
    at commitAllHostEffects (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:7445:11)
    at Object.invokeGuardedCallback$1 (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1793:10)
    at invokeGuardedCallback (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1938:29)
    at commitRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:7595:7)
    at completeRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:8645:34)
    at performWorkOnRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:8589:9)

To reproduce it, paste the following code into src/index.js in proton-hot-boilerplate, run npm run dev and change something in HotApp's children. The error occurs only when the code inside if(module.hot.data && module.hot.data.proxy) is run, not on the first render.
It also works when using HotApp directly without the Wrapper component as described in the comments:

import React, { Component } from "react";
import { App, Window, render, Box, Button } from "proton-native";
import { createProxy } from "react-proxy";

class HotApp extends Component {
  render() {
    return (
      <App>
        <Window title="Notes" size={{ w: 500, h: 350 }} margined>
          <Button>Button</Button>
        </Window>
      </App>
    );
  }
}

class Wrapper extends Component {
  render() {
    return <HotApp />;
  }
}

if (module.hot) {
  let proxy;

  if (module.hot.data && module.hot.data.proxy) {
    // hot reload

    const mountedInstances = module.hot.data.proxy.update(Wrapper);
    // Works perfectly:
    // const mountedInstances = module.hot.data.proxy.update(HotApp);

    mountedInstances.forEach(i => i.forceUpdate());
  } else {
    // initial render

    proxy = createProxy(Wrapper);
    // Works perfectly:
    // proxy = createProxy(HotApp);

    render(React.createElement(proxy.get()));
  }

  // Please reload me
  module.hot.accept();
  // Make proxy available in updated module
  module.hot.dispose(data => {
    data.proxy = proxy || (module.hot.data && module.hot.data.proxy);
  });
} else {
  render(<Wrapper />);
}

Originally created by @mischnic on GitHub (Jul 6, 2018). Original GitHub issue: https://github.com/kusti8/proton-native/issues/163 *Yes, this is an uncommon situation, but needed for hot reloading. A workaround would be fine as well.* ``` [HMR] TypeError: Cannot read property 'setChild' of undefined at Root.removeChild (.../proton-native/bin/components/DesktopComponent.js:83:36) at removeChildFromContainer (.../proton-native/bin/reconciler/index.js:82:20) at unmountHostComponents (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6816:9) at commitDeletion (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:6863:5) at commitAllHostEffects (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:7445:11) at Object.invokeGuardedCallback$1 (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1793:10) at invokeGuardedCallback (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:1938:29) at commitRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:7595:7) at completeRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:8645:34) at performWorkOnRoot (.../proton-native/node_modules/react-reconciler/cjs/react-reconciler.development.js:8589:9) ``` To reproduce it, paste the following code into `src/index.js` in [proton-hot-boilerplate](https://github.com/mischnic/proton-hot-boilerplate), run `npm run dev` and change something in `HotApp`'s children. The error occurs only when the code inside `if(module.hot.data && module.hot.data.proxy)` is run, not on the first render. It also works when using `HotApp` directly without the `Wrapper` component as described in the comments: ```js import React, { Component } from "react"; import { App, Window, render, Box, Button } from "proton-native"; import { createProxy } from "react-proxy"; class HotApp extends Component { render() { return ( <App> <Window title="Notes" size={{ w: 500, h: 350 }} margined> <Button>Button</Button> </Window> </App> ); } } class Wrapper extends Component { render() { return <HotApp />; } } if (module.hot) { let proxy; if (module.hot.data && module.hot.data.proxy) { // hot reload const mountedInstances = module.hot.data.proxy.update(Wrapper); // Works perfectly: // const mountedInstances = module.hot.data.proxy.update(HotApp); mountedInstances.forEach(i => i.forceUpdate()); } else { // initial render proxy = createProxy(Wrapper); // Works perfectly: // proxy = createProxy(HotApp); render(React.createElement(proxy.get())); } // Please reload me module.hot.accept(); // Make proxy available in updated module module.hot.dispose(data => { data.proxy = proxy || (module.hot.data && module.hot.data.proxy); }); } else { render(<Wrapper />); } ```