How to integrate this into non-browser environments?

I tried integrating this for my custom React renderer which uses a JS environment more similar to Node (e.g. uses global rather than window). After I aliased global as window, it got stumped by the lack of an addEventListener API:

file: node_modules/@pmmmwh/react-refresh-webpack-plugin/src/runtime/errorEventHandlers.js:85:10: JS ERROR TypeError: global.addEventListener is not a function. (In 'global.addEventListener(eventType, eventHandler)', 'global.addEventListener' is undefined)

What are the browser dependencies, and can anything be done to decouple it from the browser?

[pmmmwh]

It just seems that React components aren’t applying those HMR updates.

@shirakaba I think I’ve found the culprit.

react-refresh depends on developer tools integration, which needs to be manually injected via injectIntoDevTools from react-reconciler. react-nativescript doesn’t do that yet, so all the scheduleReactRefresh calls from the plugin essentially become no-ops.

You’ll have to somehow add this code snippet somewhere (presumably within the start function?):

const { version } = require('./package.json');

reactReconcilerInst.injectIntoDevTools({
  bundleType: __DEV__ ? 1 : 0,
  rendererPackageName: 'react-nativescript',
  version,
});

[pmmmwh]

Is there more to be tweaked?

Yes.

• ErrorOverlayEntry don’t have to export the functions, but have to wire them up to the actual error handlers.
• For runtime errors it would probably be something like this.
• For compile errors I’m not sure if it’s do-able, especially when NativeScript uses the Node.js IPC API to signal compile status. A workaround is to subscribe to the done event with a custom plugin.
• For clearCompileError, you will first need to get compile errors wired up then run it whenever a change is detected.
• No, you don’t need to add an Error Boundary.

It will be quite a bit of work because of the complexity of the build system especially when APIs are unavailable in the actual NS runtime 😢