Broken webpack dev server in current version (d66d633) of zoomapps-advancedsample-react

Zoom Apps
1

I keep getting this in devTools console:

WebSocket connection to 'wss://88b4-113-160-37-245.ap.ngrok.io:9090/ws' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
WebSocketClient @ bundle.js:44337
...
VM12:32 
WebSocket connection to 'wss://88b4-113-160-37-245.ap.ngrok.io:9090/ws' failed: Error in connection establishment: net::ERR_CONNECTION_TIMED_OUT
WebSocket @ VM12:32
WebSocketClient @ bundle.js:44337
initSocket @ bundle.js:46251
(anonymous) @ bundle.js:46275
...

The result being hot module replacement not working, essentially meaning I have to restart the containers to see changes.

One other thing is during compilation this was showing up:

zoomapps-advancedsample-react-frontend-1  | (node:27) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
zoomapps-advancedsample-react-frontend-1  | (node:27) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.

which seems to be an issue for many people and which I solved by replacing react-app-rewired with craco (see this comment on github)

The issue with the dev server remained though, while in the previous version (d4c7c9a) it runs just fine.

So far the only way for me to go about this seems to be to build the frontend for my app from fresh create-react-app.

Any other ideas would be great help!

UPD1: The package-lock.js problem seems to have been fixed a few days ago in the lastest commit, but the other problems are still there.

UPD2: The behaviour starts occuring after switching from react-scripts 4.0.3 to 5.0.1. See solution, as well as UPD3

UPD3: The last issue I’ve been having was that the watcher in Webpack was not reflecting changes to files in the Docker container, even though CHOKIDAR_USEPOLLING=true was set in docker-compose.yml. Solution: instead of that, set WATCHPACK_POLLING=true. Found here.

1 Like
2

@JonStewart Any thoughts on this one?

3

Here’s a fix that worked for me based on this issue on the create-react-app GitHub repo:

Basically, you have to change the WDS_SOCKET_PORT env variable to a value of 0 to prevent the client from adding the port number websocket URL that it uses for hot module replacement. You can do this in the environment section of your frontend container in docker-compose.yml.

After that, you should see the websocket connection switch from wss://88b4-113-160-37-245.ap.ngrok.io:9090/ws to wss://88b4-113-160-37-245.ap.ngrok.io/ws when you inspect the network tab in the developer tools. Hope this helps : )

1 Like
4

The above looks exactly like the problem I’m having, but the solution did not work. Adding WDS_SOCKET_PORT to my .env doesn’t change anything. No matter what I do, the ws port shows as 3000, and I need to force it to something specific in order to work in my production environment (all works fine locally). I added the variable to .env, and I added a console.log to show that it is definitely seeing that variable in the app, but the ws port still always comes back as 3000, and the ws call always fails as a result with the error:
WebSocket connection to ‘wss://server-name-goes-here.com:3000/ws’ failed
I am at a loss as to how to set this port. Any assistance would be greatly appreciated.