Hot reloading no longer works after switching back to default WebpackDevServer client

[twig]

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:

1. npm ls react-scripts (I've ejected)
2. node -v: 6.10.0
3. npm -v: 3.10.10

Then, specify:

1. Operating system: Windows 7 x64
2. Browser and version: Chromium, Firefox, Vivaldi

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

[gaearon]

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).

[twig]

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()

[gaearon]

I think the issue is you need to add webpack/hot/dev-server too as an entry point. In Webpack tutorials, you usually have both. We just combined both severs into one file (because it seemed odd to have them separate) if I recall correctly.

[twig]

yep I've enabled both at the same time (sorry, forgot to mention that)

[gaearon]

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 npm install and npm start. Thanks!

[twig]

sure will do. I'll update this issue once it's up

[twig]

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 yarn, then yarn start after it's done.

[gaearon]

Thanks, I figured it out.
If you look at what webpack-dev-server/client looks like in the compiled bundle, it looks like this:

This is because by default, we treat files with no extensions as resource files. We have an exclude rule for JS and other known types:

 // "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 ? and thus doesn’t match the strict regex. So we put the JS file through url loader by mistake, and get garbage as the result.

I can confirm that changing the exclude rule to

 {
 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 exclude regexes, so this is a non-issue there.

I’m open to taking a PR that adds (\?.*)? at the end of every regex in exclude for the next 0.9.x bugfix release. You would need to send that PR directly against 0.9.x branch. I also think we’ve dealt with this at some point in the past, but lost the fix when we removed the loader whitelist. cc @fson @EnoahNetzach

[EnoahNetzach]

In #298 it was added, and removed in #1059, but only for image/video formats.

[gaearon]

That explains it, thanks.

[gaearon]

Fixed by #1721.