Websocket not working in React.Js production build

[metaversedataman]

Describe the bug

I created a react App which talks to a node back-end. Everything works fine in development mode. The connection between the front-end and back-end is made through websocket.

Most interesting thing is, that after doing yarn build to create the production build of the app, all the pages work fine. The only thing is that, the page that integrates connection with the back-end is returning error when I inspected it in the browser. I am using Apache Server to run the build version of the app on localhost.

I am using Apache server since python server throws errors on page refresh.

From the included screenshot, as you can see, node server command, return the expected response from the backend app. The structure of the app is also shown; revealing the relationship between the front-end (smartschool and smartresult) and back-end (smartapi). Only the smartresult makes the request to back-end.

Actually, the websocket url in development (connects perfectly) is:
ws://localhost:8881
while the url reported as error in the console, after using yarn build to create the production build (not connecting) is:
ws://lo77.js.1calhost:8881/socket.io/?EI0=4&transport=websocket

How do I resolve this connection problem? Any help will be appreciated. Thank you.

Did you try recovering your dependencies?

Not a dependency issue, but obfuscation issue in production. Websocket link is only broken in production build.

Which terms did you search for in User Guide?

I have searched:
"websocket link broken in production build";
"reactJs not connecting to nodeJs in production build";
"webscoket not working in production build"

Environment

Not applicable

Steps to reproduce

(Write your steps here:)

1. Create a reactJs project that connects to nodeJs backend using websocket
2. Create the production build by running the command: yarn build
3. Serve the build version on local server such as Apache, and test if the webscoket connection works

Expected behavior

ReactJs front-end should connect to the NodeJs back-end successfully

Actual behavior

Reproducible demo

I believe anyone can reproduce this issue by creating a reactJs app that connects to nodeJs server using websocket.

[AliRazaSoomro786]

Hello sir,
I want to know that have you resolved this issue are not?

[AliRazaSoomro786]

because i also facing this issue , websocket not workin in production build in reactjs.

[AliRazaSoomro786]

if you have solved it then please help me also.

[metaversedataman]

I indeed switched to Laravel connecting react frontend through GraphQL API.