am using react with vite and trying to connect to a websokcet, everything works well in localhost but once i pushed to production and try load the page it crashes,

i got the rror

client.ts:77 WebSocket connection to 'wss://staging.example.site.com/' failed: 
client.ts:77 WebSocket connection to 'wss://localhost:4202/' failed: 
client.ts:47 [vite] failed to connect to websocket.
your current setup:
  (browser) staging.example.site.com/ <--[HTTP]--> localhost:4202/ (server)
  (browser) staging.example.site.com:/ <--[WebSocket (failing)]--> localhost:4202/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr 

chunk-6EYCRV33.js?v=be721420:903 Uncaught TypeError: Failed to fetch dynamically imported module: https://staging.example.com/src/app/views/dashboard/marketplace-trade.tsx
console.js:288 The above error occurred in one of your React components:


Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ console.js:288
logCapturedError @ chunk-3TUQ35UY.js?v=be721420:14036
update.callback @ chunk-3TUQ35UY.js?v=be721420:14056
callCallback @ chunk-3TUQ35UY.js?v=be721420:10511
commitUpdateQueue @ chunk-3TUQ35UY.js?v=be721420:10528
commitLayoutEffectOnFiber @ chunk-3TUQ35UY.js?v=be721420:17083
commitLayoutMountEffects_complete @ chunk-3TUQ35UY.js?v=be721420:17976
commitLayoutEffects_begin @ chunk-3TUQ35UY.js?v=be721420:17965
commitLayoutEffects @ chunk-3TUQ35UY.js?v=be721420:17916
commitRootImpl @ chunk-3TUQ35UY.js?v=be721420:19349
commitRoot @ chunk-3TUQ35UY.js?v=be721420:19273
finishConcurrentRender @ chunk-3TUQ35UY.js?v=be721420:18756
performConcurrentWorkOnRoot @ chunk-3TUQ35UY.js?v=be721420:18714
workLoop @ chunk-3TUQ35UY.js?v=be721420:197
flushWork @ chunk-3TUQ35UY.js?v=be721420:176
performWorkUntilDeadline @ chunk-3TUQ35UY.js?v=be721420:384
Show 16 more frames
Show lessUnderstand this error
chunk-3TUQ35UY.js?v=be721420:19409 Uncaught TypeError: Failed to fetch dynamically imported module: 

if i comment out the socket logic it works but once i added it back, it crashes again, have tried reading docs and chaging my vite config but to no avail

/// <reference types='vitest' />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

export default defineConfig({
  root: __dirname,
  cacheDir: '../../node_modules/.vite/apps/mojaa-investor',
  ...(process.env.NODE_ENV === 'development'
    ? {
        define: {
          global: {},
        },
      }
    : {}),
  resolve: {
    alias: {
      ...(process.env.NODE_ENV !== 'development'
        ? {
            './runtimeConfig': './runtimeConfig.browser', //fix production build
          }
        : {}),
    },
  },
  server: {
    port: 4202,
    host: true,
    watch: {
      usePolling: true,
    },
    hmr:false,
  },

  preview: {
    port: 4300,
    host: 'localhost',
  },

  plugins: [react(), nxViteTsPaths()],

  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [ nxViteTsPaths() ],
  // },

  build: {
    outDir: '../../dist/apps/mojaa-investor',
    reportCompressedSize: true,
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },

  test: {
    globals: true,
    cache: {
      dir: '../../node_modules/.vitest',
    },
    environment: 'jsdom',
    include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],

    reporters: ['default'],
    coverage: {
      reportsDirectory: '../../coverage/apps/mojaa-investor',
      provider: 'v8',
    },
  },
});

how i connect to the websocket is by having a custom hook

const useWebSocketMainn = () => {
  const token = getToken();

  const client = useWebSocket('wss://staging.orderbook.mojaa.exchange:8087/');

}

this code along crashes the app on production, have tried also switching libraries but still same thing, but it works well on production