React-styleguidist: Dev server crashes with react-scripts v4

[varoot]

Current behavior

When running styleguidist server with react-scripts 4.0.0 and open in the browser, the server crashes with "Error: Already listening" message.

To reproduce

1. Create a new project with latest CRA: yarn create react-app test
2. Install Styleguidist yarn add -D react-styleguidist
3. Run dev server and open the browser yarn styleguidist server --open

Demo repository:
https://github.com/varoot/styleguidist-example

Expected behavior

The dev server should run without crashing. User should be able to see the styleguide.

[rpeach]

Seems to be caused by the fast refresh changes in react-scripts/config/webpack.config.js

You can temporarily work around the error by setting an environment variable FAST_REFRESH=false

Something like this

cross-env FAST_REFRESH=false styleguidist server

[krsnaa]

Alternatively, just include it in your package.json:

"scripts": { "styleguide": "FAST_REFRESH=false styleguidist server" }

[aniketkolekar-ms]

Temporary Fix:

1. Install cross-env : npm install --save-dev cross-env
2. Update script in package.json : "scripts": { "styleguide": "cross-env FAST_REFRESH=false styleguidist server" }
3. Run : npm run styleguide

This worked for me. Auto-refresh working fine.

[poteirard]

Maybe this is related https://github.com/facebook/create-react-app/pull/9872 ?

[lyz810]

I have the same problem,when upgrade to 11.1.2,and 11.1.1 has the same problem

I find react-dev-utils in package.json upgrade from ^9.1.0 to ^11.0.0

[email protected] use sockjs-client, an [email protected] use browser WebSocket directly
[email protected]:
https://github.com/facebook/create-react-app/blob/v3.2.0/packages/react-dev-utils/webpackHotDevClient.js#L61
[email protected]:
https://github.com/facebook/create-react-app/blob/v4.0.0/packages/react-dev-utils/webpackHotDevClient.js#L60

In Chrome network panel, the requests are different .
[email protected]([email protected]):

[email protected]([email protected]):

The selected websocket request in the second picture cause the webpack dev server crash
In old version, this request will not be send, so the server runs normally, However, when I type new WebSocket('ws://localhost:6060/sockjs-node') in Chrome console panel, the server crash with error message:

Error: read ECONNRESET
Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:205:27)
...

I'm not sure this bug is cause by react-dev-utils/webpackHotDevClient(should not send the /sockjs-node websocket connection), or by webpack-dev-server(should handle the connection correctly)

[lyz810]

I have the same problem,when upgrade to 11.1.2,and 11.1.1 has the same problem

I find react-dev-utils in package.json upgrade from ^9.1.0 to ^11.0.0

[email protected] use sockjs-client, an [email protected] use browser WebSocket directly
[email protected]:
https://github.com/facebook/create-react-app/blob/v3.2.0/packages/react-dev-utils/webpackHotDevClient.js#L61
[email protected]:
https://github.com/facebook/create-react-app/blob/v4.0.0/packages/react-dev-utils/webpackHotDevClient.js#L60

In Chrome network panel, the requests are different .
[email protected]([email protected]):

[email protected]([email protected]):

The selected websocket request in the second picture cause the webpack dev server crash
In old version, this request will not be send, so the server runs normally, However, when I type new WebSocket('ws://localhost:6060/sockjs-node') in Chrome console panel, the server crash with error message:

Error: read ECONNRESET
Error: read ECONNRESET
    at TCP.onStreamRead (internal/stream_base_commons.js:205:27)
...

I'm not sure this bug is cause by react-dev-utils/webpackHotDevClient(should not send the /sockjs-node websocket connection), or by webpack-dev-server(should handle the connection correctly)

In this source code: https://github.com/webpack/webpack-dev-server/blob/89ffb86cd26425c59e3937ca06a2c804a01b8f1d/lib/utils/getSocketServerImplementation.js#L9

webpack-dev-server support two method: ws and sockjs by passing transportMode, if not given, use {server: 'sockjs', client:'sockjs'} as default

Since the latest version of webpackHotDevClient use WebSocket, so I think it should be passed by transportMode: { server: 'ws', client:'ws'}

// webpack.config.js
module.exports = {
    devServer: {
        transportMode: {
            server: 'ws',
            client: 'ws',
         },
     },
};

This worked for me.

[styleguidist-bot]

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

The release is available on:

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

Your semantic-release bot :package::rocket: