npm run build:gh breaks the build in some cases

[sehgalhimanshusparktg]

I use 2 commands to create project builds

1. npm run build
2. npm run build:gh

The first one works fine, no issues, build works as expected But when i run 2nd command and deploy my build on nginx , the rendering works fine. But there is a point in my code where the UI tries to connect with a websocket URL (for Webrtc) .

The url printed in the log is perfectly fine, but the code is not able to parse it. The same code works perfectly fine in development env(npm run start) as well I have made no changes in webpack.config.js and it is as below const path = require("path"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const isProduction = process.env.NODE_ENV === "production";

module.exports = { entry: "./src/index.tsx", mode: isProduction ? "production" : "development", devtool: isProduction ? "source-map" : "eval-source-map", plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", inject: false, filename: "index.html", }), ], resolve: { extensions: [".tsx", ".ts", ".js"], }, output: { path: path.resolve(__dirname, "dist"), filename: "index.bundle.js", clean: true, }, module: { rules: [ { test: /.svg$/i, issuer: /.[jt]sx?$/, use: ["@svgr/webpack"], }, { test: /.(ts|tsx|js)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, ], }, devServer: { https: true, port: 9025, static: { directory: path.resolve(__dirname, "src"), }, historyApiFallback: { index: "index.html", }, }, };

Any solution will be much appreciated !!

[alonso-cadenas]

Hi @sehgalhimanshusparktg, could you please fill out the bug template? We need more context on this bug.

[sehgalhimanshusparktg]

Description

1. I am developing a webrtc integration with hubspot using demo react app.

2. Webrtc involves creating a websocket connection with a backend server through which voice streaming is made possible. For this purpose i have added "sip.js": "^0.21.2" dependency in package.json, which is a webrtc library.

3. My test server websocket URL looks like this --> wss://development.telephonycloud.co.in:443/asteriskWss104

4. I hard coded this websocket connection like this --

5. This code works fine in my local dev environment

6. It also works fine if I create a build using "npm run build" command and deploy it on nginx web server. No issues here.

7. BUT when i create a minified build using command "npm run build:gh". Then the build is not able to parse this websocket connection URL , which was working perfectly fine in local dev env and when i created build using npm run build.

Expected behavior Websocket connection should work fine when build created with npm run build:gh command

To Reproduce

1. hardcode a websocket url somewhere in the code.
2. create a build using npm run build:gh command
3. build will not be abe to make connection , should throw parsing error

Screenshots/source code

Device information https://www.whatsmybrowser.org/b/9L8QB

[esme]

Hi @sehgalhimanshusparktg, thanks for providing more context around the issue. Are you able to set the WebSocket URL using an environment variable instead of hardcoding it as a string?

[sehgalhimanshusparktg]

Hi @esme , I have hard coded the URL just for my ease. But in reality this URL will be coming from backend via API response. Since we have multiple media servers at backend, this URL cannot be hardcoded anywhere in the app , and cannot be set in environment variable as well. This websocket URL will be derived like this -- const protocol = window.location.protocol === "https:" ? "wss" : "ws" || "ws"; const webrtcWebsocketServer = protocol + "://"+${SPARKTG_DOMAIN}+":443/" + apiResponseJson.webrtcWebsocketServer; I was initially doing like this only, but even this does not work. So I have hard coded the URL just for testing purposes until this issue is resolved complete login api code is something like below

[alonso-cadenas]

Hi @sehgalhimanshusparktg, thank you for your efforts to integrate with HubSpot! I am closing this issue since it is not a bug with the systems we've built. Please reach out to appsupport@hubspot.com for assistance with developing your calling app!

Best regards, Alonso

[sehgalhimanshusparktg]

Yes I agree that is bug is not with your built systems. But it's nonetheless a bug in your or your team's created demo react app. The underneath problem lies in the minifying process of the app. We need to try different libraries/tools to change the minification process and then test out which one works fine and fixes the above bug ! Any suggestions will be helpful.

[esme]

@sehgalhimanshusparktg Since we're encountering this issue for the first time, it would be a good idea to reach out to the HubSpot app support team for assistance. Feel free to experiment with the minification process in webpack.config.js, or debug the issue further by setting isProduction to true to enable source maps.