# Broken webpack dev server in current version (d66d633) of zoomapps-advancedsample-react **URL:** \ **Category:** Zoom Apps\ **Created:** [March 23, 2023, 12:25pm UTC](https://devforum.zoom.us/t/broken-webpack-dev-server-in-current-version-d66d633-of-zoomapps-advancedsample-react/85210 "2023-03-23T12:25:17Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![biinster](https://avatars.discourse-cdn.com/v4/letter/b/bc8723/32.png) [@biinster](https://devforum.zoom.us/u/biinster)\ **Post date:** [March 23, 2023, 12:25pm UTC](https://devforum.zoom.us/t/broken-webpack-dev-server-in-current-version-d66d633-of-zoomapps-advancedsample-react/85210/1 "2023-03-23T12:25:17Z")
I keep getting this in devTools console: ```auto 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: ```auto 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](https://github.com/facebook/create-react-app/issues/12035#issuecomment-1238144577)) The issue with the dev server remained though, **while in the previous version ([d4c7c9a](https://github.com/zoom/zoomapps-advancedsample-react/commit/d4c7c9a3001a57b8b4e5e93b727d7babb8dffd31)) 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](https://github.com/zoom/zoomapps-advancedsample-react/commit/96fabc783df46df53bed78b624b46fd9fa1c9f5e), but the other problems are still there. **UPD2:** The behaviour starts occuring after [switching from react-scripts 4.0.3 to 5.0.1](https://github.com/zoom/zoomapps-advancedsample-react/commit/d66d63360c4d64e88a38b05802de5bd1261116e2#diff-da6498268e99511d9ba0df3c13e439d10556a812881c9d03955b2ef7c6c1c655). 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](https://stackoverflow.com/a/72712517/8179782). ---
**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\ **Post date:** [March 28, 2023, 9:53pm UTC](https://devforum.zoom.us/t/broken-webpack-dev-server-in-current-version-d66d633-of-zoomapps-advancedsample-react/85210/2 "2023-03-28T21:53:31Z")
@JonStewart Any thoughts on this one? ---
**Author:** ![becka.geleto1](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/becka.geleto1/32/46407_2.png) [@becka.geleto1](https://devforum.zoom.us/u/becka.geleto1)\ **Post date:** [April 10, 2023, 8:55pm UTC](https://devforum.zoom.us/t/broken-webpack-dev-server-in-current-version-d66d633-of-zoomapps-advancedsample-react/85210/3 "2023-04-10T20:55:50Z")
Here’s a fix that worked for me based on this issue on the create-react-app GitHub repo: - [Hot reload doesn’t work in Gitpod after fresh CRA install · Issue #11897 · facebook/create-react-app (github.com)](https://github.com/facebook/create-react-app/issues/11897) 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 : ) ---
**Author:** ![danpeltier](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/danpeltier/32/57882_2.png) [@danpeltier](https://devforum.zoom.us/u/danpeltier)\ **Post date:** [March 24, 2024, 1:37pm UTC](https://devforum.zoom.us/t/broken-webpack-dev-server-in-current-version-d66d633-of-zoomapps-advancedsample-react/85210/4 "2024-03-24T13:37:41Z")
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.