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

├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └─┬ [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
├─┬ [email protected]
│ └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @webpack-cli/[email protected]
│ │ └── [email protected] deduped
│ └── [email protected] deduped
└─┬ [email protected]
└─┬ [email protected]
└── [email protected] 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]

[email protected]
https://github.com/facebook/create-react-app/blob/react-dev-utils%4011.0.3/packages/react-dev-utils/webpackHotDevClient.js#L66

[email protected]
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 📦🚀