Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
otakustay opened this issue Dec 9, 2019 · 14 comments
Closed

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

otakustay opened this issue Dec 9, 2019 · 14 comments

Comments

@otakustay
Copy link

otakustay commented Dec 9, 2019 •
edited
Loading

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 otakustay changed the title Failed to work when react is aliased and loaded via standalone script Failed to work when react is external and loaded via standalone script Dec 9, 2019
@otakustay
Copy link
Author

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.

@otakustay otakustay mentioned this issue Dec 9, 2019
Closed
@pmmmwh
Copy link
Owner

pmmmwh commented Dec 9, 2019

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 gaearon mentioned this issue Dec 17, 2019
Merged
@gaearon
Copy link

gaearon commented Dec 17, 2019

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

@gaearon
Copy link

gaearon commented Dec 17, 2019

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
Copy link

gaearon commented Dec 17, 2019

Fixed in react-refresh@0.7.1.

@pmmmwh
Copy link
Owner

pmmmwh commented Dec 17, 2019

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

@gaearon
Copy link

gaearon commented Dec 17, 2019

FWIW I've verified this with the plugin.

@pmmmwh
Copy link
Owner

pmmmwh commented Dec 17, 2019

FWIW I've verified this with the plugin.

OK - closing this for now.

@pmmmwh pmmmwh closed this as completed Dec 17, 2019
@otakustay
Copy link
Author

@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
Copy link
Owner

pmmmwh commented Dec 18, 2019

@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
Copy link
Author

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

@pmmmwh
Copy link
Owner

pmmmwh commented Dec 20, 2019

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

Good to hear that!

@qiaoqiaowang
Copy link

qiaoqiaowang commented Dec 22, 2020 •
edited
Loading

FWIW I've verified this with the plugin.

OK - closing this for now.

react-refresh 0.9.0
react 16.9.0
react-dom 16.9.0
@pmmmwh
externals still not work. I checked this in example/webpack-dev-server, add

<script type="text/javascript" src="//unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
in index.html <head>, and add externals in webpack.config.js.

@pmmmwh
Copy link
Owner

pmmmwh commented Dec 24, 2020

FWIW I've verified this with the plugin.

OK - closing this for now.

react-refresh 0.9.0
react 16.9.0
react-dom 16.9.0
@pmmmwh
externals still not work. I checked this in example/webpack-dev-server, add

<script type="text/javascript" src="//unpkg.com/react@16.9.0/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@16.9.0/umd/react-dom.production.min.js"></script>
in index.html <head>, and add externals in webpack.config.js.

The PRODUCTION build will not work.

@enuchi enuchi mentioned this issue Jun 2, 2021
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@otakustay @gaearon @pmmmwh @qiaoqiaowang