react-refresh + ReactDOM: hot reloading only works when bundling React

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

bug?

What is the current behavior?

note: I am encountering this issue when using https://github.com/pmmmwh/react-refresh-webpack-plugin, but I believe it’s an issue with react-refresh itself.

The react-refresh runtime overrides __REACT_DEVTOOLS_GLOBAL_HOOK__.inject to get a reference to the React renderer. In my app, the inject method is never called however, because I load react/react-dom from a third-party CDN before my application code. This means that changed components are never actually refreshed in the DOM.

I believe the issue is that scripts are loaded in this order:

1. react-devtools sets up the global hook
2. react/react-dom are loaded on the page, and inject() is called
3. user code (which is instrumented with the react-refresh babel plugin) is loaded on the page, and inject() is monkey-patched

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

Follow the usage steps in the https://github.com/pmmmwh/react-refresh-webpack-plugin repo, but also add react and react-dom as externals in your Webpack build:

module.exports = {
  //...
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  }
};

then load those scripts onto the page from a CDN (e.g. unpkg or cdnjs) before the Webpack bundle.

What is the expected behavior?

react-refresh works the same whether React/ReactDOM are bundled with application code, or loaded via an external script.

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

16.8.6 / Chrome / osx

[benjamingr]

I have a weird ask - is there a way for react-refresh to work with a production version of React? (and load after)

Our current workaround (as a plugin hosted in another site) is to use a browser extension to swap the react production build for react development build but that’s not really optimal.

[gaearon]

Fixed in react-refresh@0.7.1. You’ll need a development version of React and >= 16.10 or so.