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.
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
Webpack 5 does not re render #252
Comments
i removed the browser list and still the same, I will keep looking around that but I already read all of that and still not refreshing, how I said I debuged the performRefresh and the code is new in the refresh but never refresh the browser |
I already tested and looks like is working and console says modules update but never refresh the page with the changes. the only thing is nor working is the re render but Webpack is doing the refresh and the console says [HMR] modules updated [WDS] App hot update...
log.js:24 [HMR] Checking for updates on the server...
2index.js?http://localhost:3001:103 [WDS] 99% - done (plugins).
index.js?http://localhost:3001:103 [WDS] 99% - .
2index.js?http://localhost:3001:103 [WDS] 99% - cache (store build dependencies).
2index.js?http://localhost:3001:103 [WDS] 99% - cache (begin idle).
index.js?http://localhost:3001:103 [WDS] 100% - Compilation completed.
websocket.js:124 WebSocket connection to 'ws://localhost:3000/ws/?EIO=3&transport=websocket' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED
WS.doOpen @ websocket.js:124
Transport.open @ transport.js:84
Socket.open @ socket.js:250
Socket @ socket.js:122
Socket @ socket.js:28
Manager.open.Manager.connect @ manager.js:226
eval @ manager.js:544
log.js:24 [HMR] Updated modules:
log.js:24 [HMR] - ./src/containers/Home/Home.js
log.js:24 [HMR] App is up to date. |
even more the code is refreshed the only thing is not working is the re-render, if I click in the navigation link and go back clicking on the home page the home page has the changes. so it is working just the RE-RENDER action is not doing. Also how other user comment parent folders are not refreshing even navigating for the web. |
Hi, can you describe more how your app is structured, provide more info on webpack config and versions of dependencies used (webpack, react, react refresh, etc.) Or even better, provide a reproducible example. |
Hi, im using webpack v5, webpack serve —hot, react 17 with universal-webpack integration. All aparently is working but never refresh or re-render action is not performed, but files changes, parent components never was refreshed, needs a hard relod. Sorry i writing from the mobile. |
Are you doing SSR? Do you include the Babel plugin and this plugin on server side? Would you mind creating a sample repo to demonstrate the problem? |
Yes i doing ssr and yes im not including this plugin or nothing relevant to react refresh in ssr builds. |
sorry I have no engouh time to create a repo with the same structure, but probably all the projects with react refresh plugin Webpack 5 will be the same |
Yes, I have the same issue. Changes are not reflected in the UI util I refresh. Was working perfectly fine with webpack 4.x My current setup:
|
I dbl checked and in-browser console I see only
Pretty much the same as in webpack4. Not sure what can be wrong? |
Hmr is not active. What command did you use for server ? |
|
i have that issue before, was because the server does not up the socket, and was waiting to connect. this is my configuration: devServer: {
port,
contentBase: `http://${host}:${port}`,
historyApiFallback: true,
compress: true,
quiet: true,
noInfo: true,
hot: true,
hotOnly: true,
inline: true,
lazy: false,
overlay: true,
// injectHot: true,
liveReload: false,
} |
Arent |
nope, hot is for reload and hontOnly is for does not hard refresh (Browser) in case something happens. |
Same settings, yet nothing besides |
Found a source of my issue: webpack/webpack-dev-server#2758 After adding |
Refresh works? |
Yes! |
They are actually mutually exclusive - webpack-dev-server internally would prefer one over the other I believe. Also - I think |
I still having no refresh, hmr is working but componentes never re-render |
here is an example not working. https://github.com/joacub/test-react-refresh live refresh does not work |
I'll take a look tonight - thanks for the reproduction! |
Thanks, for start the server just run the command npm run dev |
Did you could try ? |
Need more time to investigate - it is a bit of a complex setup ... |
@pmmmwh I got a simple test repo that react-fast-refresh doesnt work as well. Please take a look: https://github.com/geart891/testrfr |
how did you resolve this ? |
@pmmmwh did you test or found the issue ? |
@joacub you can update webpack-dev-server@4.x now! it has supported webpack@5. and remember to turn off liveReload option. |
I did, still not working. |
it works on my project...good luck! |
🤔, can you share your command to start and the devServer config ? |
I double check, update and recompiling works, react refresh does not work |
@joacub this is almost all my config. you can have a try. |
In my projects still not working, recompiling works but react refresh is not working |
@joacub, one simple debug is to copy all your configs to a new repo, and start with just simple |
Thats what the sample repo has, just one simple component with it And lazy load component..., this is working before... |
I'm pretty certain with two fixes you should be able to get the integration working (however they might be complex depending on your setup - especially when you're running SSR).
Unfortunately due to my time constraints and the complexity of your configuration, I wouldn't be able to dig deeper into this at least for the upcoming week. |
you are completely right, just adding the entry point to the config this is working again. I thought the system read the Webpack config to get the entry point. not needed the second change. thanks a lot |
Happy to know that it worked for you 😀 If you think this is resolved feel free to close the issue.
Yes - sort of. However, in cases where this is ambiguous we could only do a best guess, and in your case we received |
Thanks, will close |
There's no such thing as "
For my Webpack 5 setup, the plugin also didn't work.
|
There is this - it is in
This is a bug on our side - we have logic that would throw when we can't seem to search for the
I would like to know what we can improve on. HMR is inherently a very complex topic by nature and we try our best to encapsulate as much as possible while giving flexibility in the setup (like allowing multiple hot integrations). The Babel plugin is unfortunate as there are no reliable way to detect/inject a Babel plugin into your setup - we probably also don't want to do that either as there are community integrations like |
Oh, okay, there is
Why not simply default to https://webpack.js.org/configuration/ "Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is
Well, there's simply too much text. Too much variables, too much if/else-s. In this case do this. In that case do that. If you're using X do Y. If you're using Z do W. Too much variations. You prefer adding |
I guess there is also the issue where you have defined it but we couldn't find it, or if your entry is injected by another plugin that runs afterwards. I think we could do that but would have to be pointed out in the docs that this is the behaviour.
Do you have concrete ways we can improve? What do you think we should do instead? Simply saying
This is a special case - |
Hmm, exotic edge cases. I don't know how you "search" for
Well, ideally, it could have been an interactive configuration "quiz", something like: "Do you use What are you using? webpack-dev-serverHow do you configure Babel? Through separate configDo you use one webpack config or several? OneBlah blah SeveralBlah blah In webpack.configDo you use one webpack config or several? OneBlah blah SeveralBlah blah Other thingAnother thingAnyway, I'm not proposing a solution here, I'm just expressing the feelings of a regular user. |
works for me ,thx |
Just in case someone comes across this one - in my case it was React Developer Tools extension not being installed in my browser. |
With webpack 5 is not re-rendering the changes, seems like is working and the files changes but the visual changes never happens, i debuged the perfomReactRefresh function and the changes are there, but the browser never re render with the changes. I have to reload the browser for see the changes
The text was updated successfully, but these errors were encountered: