Failed to work when react is external and loaded via standalone script

[otakustay]

With HTML template like:

<script src="https://cdn.jsdelivr.net/npm/react@16.12.0/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@16.12.0/umd/react-dom.production.min.js"></script>

And a webpack config including:

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

This plugin fails to work.

I'd like to dive into it a little, but with little knowledge about webpack I'm not sure I can find any valuable ideas.

[otakustay]

After looking into both this plugin and react-refresh/runtime, it comes the essential part of this issue is that react-refresh/runtime's setup should be run before react-dom is initialized.

I tried to extract react-refresh/runtime and ReactRefreshEntry.js into separated .js files and load them from <script> element BEFORE react-dom, hot reload works as expected.

In this case, problem becomes a little complex, we should first make react-refresh/runtime loadable from CDN, and then the refresh entry loadable from CDN.

[pmmmwh]

After looking into both this plugin and react-refresh/runtime, it comes the essential part of this issue is that react-refresh/runtime's setup should be run before react-dom is initialized.

I tried to extract react-refresh/runtime and ReactRefreshEntry.js into separated .js files and load them from <script> element BEFORE react-dom, hot reload works as expected.

In this case, problem becomes a little complex, we should first make react-refresh/runtime loadable from CDN, and then the refresh entry loadable from CDN.

Yes, the runtime setup have to be done before React's first run. This is unfortunately a limitation from the runtime. I will subscribe to facebook/react#17552, but before that is resolved not a lot could be done here.

[gaearon]

Can you check if facebook/react#17633 fixes this?

[gaearon]

I verified that facebook/react#17633 fixes it, although it will only work with development versions of React. Your snippet uses production versions so you'll need to somehow handle that.

[gaearon]

Fixed in react-refresh@0.7.1.

[pmmmwh]

@otakustay can you check to see if the plugin works now with react-refresh@0.7.1?

[gaearon]

FWIW I've verified this with the plugin.

[pmmmwh]

FWIW I've verified this with the plugin.

OK - closing this for now.

[otakustay]

@gaearon I can confirm react-refresh@0.7.1 works, but along with this plugin's 0.1.2 version part of my app fails to render, some network requests triggered inside useEffect are not executed.

[pmmmwh]

@gaearon I can confirm react-refresh@0.7.1 works, but along with this plugin's 0.1.2 version part of my app fails to render, some network requests triggered inside useEffect are not executed.

Is it possible to provide a Repo/CodeSandbox or something that can reproduce your issue?

[otakustay]

@pmmmwh I'v checked this is caused by another modification of my build tools, this plugin did everything well