-
-
Notifications
You must be signed in to change notification settings - Fork 26.8k
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
Hot reloading no longer works after switching back to default WebpackDevServer client #1713
Comments
When you say "hot reload" do you mean "refreshing the page"? Webpack's hot reloading feature is something different (it is what lets you edit CSS without refreshing). |
Sorry if the terminology isn't quite right. What I mean by "hot reloading" is that the CSS changes are no longer applying without refreshing and the JS changes are no longer triggering a window.reload() |
I think the issue is you need to add |
yep I've enabled both at the same time (sorry, forgot to mention that) |
Could you provide a ready project that reproduces it? I know you posted the steps, but with a lot of bug reports unfortunately the situation is one spends 15 minutes following the steps, and then can’t reproduce the issue. So recently I’ve been leaning towards only investigating bugs that have clear prepared repro cases that are ready to |
sure will do. I'll update this issue once it's up |
Alright I've uploaded an example up here: https://github.com/twig/brokenhotreload/ There is only one change made after I ejected from create-react-app and it's in this commit. You should be able to get up and running by checking it out and running |
Thanks, I figured it out. This is because by default, we treat files with no extensions as resource files. We have an // "url" loader embeds assets smaller than specified size as data URLs to avoid requests.
// Otherwise, it acts like the "file" loader.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
], However, it doesn’t work with the query notation: require.resolve('webpack-dev-server/client') + '?http://localhost:3000/', The resource URL includes I can confirm that changing the {
exclude: [
/\.html$/,
/\.(js|jsx)(\?.*)?$/, fixes the issue. I can also confirm that this is fixed in master which uses Webpack 2. I think Webpack 2 doesn’t pass anything after the file extension to the I’m open to taking a PR that adds |
That explains it, thanks. |
Fixed by #1721. |
thanks for the prompt and detailed responses guys! |
I had to switch to the default WebpackDevServer client because it allowed me to specify the server address. I've found that doing so breaks the hot reloading functionality completely.
I have another project created by an older version of create-react-app (sorry, can't remember what version) but it's using the same version of webpack-dev-server and configuration and works fine.
That's with the same node/npm.
Can you reproduce the problem with latest npm?
I'm currently using the latest node and npm available (node 6.10.0 / npm 3.10.10)
Description
Hot reload does not work with the default webpack-dev-server client
Expected behavior
Hot reload should work with the default webpack-dev-server client.
Actual behavior
There is no websocket connection attempt made to the address specified (http://localhost:3000/), hence hot reload can never be triggered by a code change.
Environment
Run these commands in the project folder and fill in their results:
npm ls react-scripts
(I've ejected)node -v
: 6.10.0npm -v
: 3.10.10Then, specify:
Reproducible Demo
Steps to reproduce:
With the latest node/npm/yarn
npm install -g create-react-app
create-react-app hotreload
cd hotreload
yarn start
Test that hot reload works by editing
App.js
Stop the server
yarn eject
confirm
Y
yarn start
Test that hot reload works by editing
App.js
edit
hotreload/config/webpack.config.dev.js
find line 43:
require.resolve('react-dev-utils/webpackHotDevClient'),
comment it out and replace it with
require.resolve('webpack-dev-server/client') + '?http://localhost:3000/',
yarn start
Test that hot reload works by editing
App.js
Hot reload no longer works
The text was updated successfully, but these errors were encountered: