react-refresh load from CDN?

[otakustay]

Do you want to request a feature or report a bug?

feature

What is the current behavior?

When react-dom is loaded from CDN like <script src="https://cdn.jsdelivr.net/npm/react-dom@16.12.0/umd/react-dom.development.js"></script>, react-refresh failed to inject hook into devtools.

I've created a related issue here: pmmmwh/react-refresh-webpack-plugin#13

We should find a way to invoke injectIntoGlobalHook function from react-refresh/runtime, however this file is in cjs format so we cannot currently do this in a simple way.

What is the expected behavior?

I'd like react-refresh to publish runtime as a umd bundle so we can reference it from CDN and put it before react-dom's <script> element, then invoke injectIntoGlobalHook in the right place.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

• react-dom: 16.12.0
• react-refresh: 0.7.0

[otakustay]

Is it possible that react-dom handle injection lazy on the first render call? This way externals tools can hook injections more easily

[gaearon]

Can you check if #17633 fixes it?

[gaearon]

I verified #17633 fixes this.

[gaearon]

Fixed in react-refresh@0.7.1.

[thetrime]

I realise this issue is already over a year old, but I'm not sure if this is really fixed. If you load react-dom first, then injectInternals() will return immediately if REACT_DEVTOOLS_GLOBAL_HOOK is not defined. If we then load react-refresh, it will check if REACT_DEVTOOLS_GLOBAL_HOOK is defined, and if not, define it by itself, but there doesn't seem to be any attempt to re-inject the hooks. The react-dom code doesn't set injectedHook except in injectInternals(), and if injectedHook is null then onCommitRoot() will have no effect.

The upshot is that loading react-dom as an external from a webpack project means it'll always load before react-refresh if that's bundled in (and it seemingly has to be, since I don't see it on a CDN).

Should I open a new issue for this, or am I missing something obvious? FWIW, it works fine if I have the devtools installed. If I uninstall them, I get no HMR (or rather, I get all the normal activity for HMR but no actual changes to the DOM). If I include react-dom inside my bundle so it loads after react-refresh, then everything works in all cases.
I'm using react-17.0.1 (though I also tested with 16.10) and react-refresh-0.9.0

[pmmmwh]

Should I open a new issue for this, or am I missing something obvious? FWIW, it works fine if I have the devtools installed. If I uninstall them, I get no HMR (or rather, I get all the normal activity for HMR but no actual changes to the DOM). If I include react-dom inside my bundle so it loads after react-refresh, then everything works in all cases.
I'm using react-17.0.1 (though I also tested with 16.10) and react-refresh-0.9.0

Can you provide a bit more details on how you're setting up your project, how are you externalising React and what versions (including dev vs prod build) of React/ReactDOM/ReactRefresh you're using?

[thetrime]

Can you provide a bit more details on how you're setting up your project, how are you externalising React and what versions (including dev vs prod build) of React/ReactDOM/ReactRefresh you're using?

I can do one better than that - here's a simple(as possible) self-contained example: https://github.com/thetrime/hmr-test

You should just be able to npm install && npm start. Then try editing src/App.jsx to change the content of the page and save it. I see all the updates in the network tab in my browser, but no actual changes are reflected unless I reload.

The README.md contains a description of what the problem appears to be at a code level. I'm using dev builds of all 3 modules, versions 17.0.1 for React/ReactDOM and 0.9.0 for ReactRefresh. The repository illustrates how I'm externalising it, but the summary is that in webpack.config.js I have

    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    },

and in my index.html I include CDN links for both of these in the head section. I experimented with trying to get the bundle to load before the CDN links, but that seems like a risky approach to take (and I couldn't get it to work anyway).

Hopefully I'm doing something foolish, but looking at the code for react-dom and react-refresh I can't see how this could possibly work if react-dom is ever loaded first, and my understanding of this issue was that it was supposed to address that specific case.

[nordfjord]

We're having the same issue as thetrime.

We're using the development builds of react and react-dom and dynamically loading applications via SystemJS.

This means react-dom always loads before react-refresh in our scenario.

A workaround for now seems to be to install the react-devtools chrome extension as that makes the __REACT_DEVTOOLS_GLOBAL_HOOK__ available