Hot Reload cannot work

[lyz810]

Current behavior
Hot Reload cannot work

To reproduce
Upgrade react-styleguidist from 11.1.8 to 11.2.0

11.1.8 works well

Expected behavior

[juanca]

Which Webpack version are you using?

[juanca]

Just for another data point. I tested with Webpack 5 and it works. It should work with Webpack 4.

[lyz810]

Which Webpack version are you using?
version of webpack: 5.67.0
I can't find any kind of websocket request in Chrome Network Panel

I tried to revert part of new changes in 11.2.0(change the file in node_modules, and restart)
92518df#diff-5c873f8bf346d5bd54eaebda2215d65647f4f53a4b3e84987d520091d0d913f9L122
It didn't work, but something differerent in Chrome Network Panel

Then, I downgrade to 11.1.8，and restart the project, everything is ok

├─┬ babel-loader@8.2.3
│ └── webpack@5.67.0 deduped
├─┬ copy-webpack-plugin@10.2.1
│ └── webpack@5.67.0 deduped
├─┬ css-loader@6.5.1
│ └── webpack@5.67.0 deduped
├─┬ less-loader@10.2.0
│ └── webpack@5.67.0 deduped
├─┬ postcss-loader@6.2.1
│ └── webpack@5.67.0 deduped
├─┬ react-styleguidist@11.2.0
│ ├─┬ clean-webpack-plugin@3.0.0
│ │ └── webpack@5.67.0 deduped
│ ├─┬ copy-webpack-plugin@6.4.1
│ │ └── webpack@5.67.0 deduped
│ ├─┬ mini-html-webpack-plugin@3.1.3
│ │ └── webpack@5.67.0 deduped
│ ├─┬ react-dev-utils@12.0.0
│ │ └─┬ fork-ts-checker-webpack-plugin@6.5.0
│ │ └── webpack@5.67.0 deduped
│ ├─┬ terser-webpack-plugin@4.2.3
│ │ └── webpack@5.67.0 deduped
│ └─┬ webpack-dev-server@3.11.2
│ ├─┬ webpack-dev-middleware@3.7.3
│ │ └── webpack@5.67.0 deduped
│ └── webpack@5.67.0 deduped
├─┬ style-loader@3.3.1
│ └── webpack@5.67.0 deduped
├─┬ webpack-cli@4.9.2
│ ├─┬ @webpack-cli/configtest@1.1.1
│ │ └── webpack@5.67.0 deduped
│ └── webpack@5.67.0 deduped
└─┬ webpack@5.67.0
└─┬ terser-webpack-plugin@5.2.5
└── webpack@5.67.0 deduped

[lyz810]

add entry,plugins,devServer.sockPath should work

{ 
entry: [require.resolve('react-dev-utils/webpackHotDevClient')],
plugins: [new _webpack.default.HotModuleReplacementPlugin()],
devServer: {
    transportMode: 'ws',
    sockPath: 'ws'
}
}

[lyz810]

react-dev-utils@11.0.3
https://github.com/facebook/create-react-app/blob/react-dev-utils%4011.0.3/packages/react-dev-utils/webpackHotDevClient.js#L66

react-dev-utils@12.0.0
https://github.com/facebook/create-react-app/blob/main/packages/react-dev-utils/webpackHotDevClient.js#L66

if process.env.WDS_SOCKET_PATH is not set, default value change between two versions(old default value was /sockjs-node, an new default value is /ws)

and if we dont pass sockPath to devSever config, the webpack-dev-server will use /sockjs-node as default:
https://github.com/webpack/webpack-dev-server/blob/v3.11.3/lib/Server.js#L108

That's why the websocket request is always pending even if I add entry and pulgins back to the node_modules source code.

[lyz810]

I find the solution of this case:

Add following config into styleguide.config.js

{
  webpackConfig: {
    devServer: {
      injectClient: true,
    },
  },
},

I think it can be added in here:
https://github.com/styleguidist/react-styleguidist/blob/master/src/scripts/make-webpack-config.ts#L123

[juanca]

I see the issue. The recent Webpack 5 compatibility is based on webpack-dev-server@^4. See the migration guide for v4.

I'm not sure what is the best next step:

• Is it possible to support both versions (^3 and ^4)?
• Is it appropriate to specify webpack-dev-server as a dependency?

[stale]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[github-actions]

🎉 This issue has been resolved in version 12.0.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀