Skip to content

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

@mxmul

Description

@mxmul

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions