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) https://github.com/styleguidist/react-styleguidist/commit/92518df856bbd6ba0003b4f5ea7ed7565bdfea65#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[bot]]

😴 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[bot]]

:tada: This issue has been resolved in version 12.0.0 :tada:

The release is available on:

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

Your semantic-release bot :package::rocket: