const Eg=process.nextTick ReferenceError: process is not defined'

[faileon]

Hi folks,
I've been using socket.io for a while, but recently after updates to my svelte and vite it broke. But only in production environment, during development on localhost it all works fine. Why does it work when runing with the vite dev server locally, but breaks on my production environment which is just nginx serving the html+js?

I started getting erorrs in my browser app:
const Eg=process.nextTick ReferenceError: process is not defined'

Which makes sense, there is no process in the browser, that is a NodeJS environment.
I triple checked everything, I am only importing from socket.io-client in my frontend application:

import { io } from 'socket.io-client';
import type { Socket } from 'socket.io-client';

export const getSockClient = (auth: Record<string, string>): Socket<any, any> =>
    io({
        auth,
        autoConnect: false,
        transports: ['websocket'],
        path: '/ws' // my server is at this path instead of default /socket.io
    });

I tried many things to resolve this, but the only thing that helped is using vite-plugin-node-polyfills, now my application will load because the necessary attributes are pollyfilled. Is this indeed necessary? My entire vite config:

/// <reference types='vitest' />
import { defineConfig, searchForWorkspaceRoot } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { nodePolyfills } from 'vite-plugin-node-polyfills';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

export default defineConfig({
    root: __dirname,
    build: {
        outDir: '../../../dist/apps/ui/chat',
        reportCompressedSize: true,
        commonjsOptions: {
            transformMixedEsModules: true,
        },
    },
    cacheDir: '../../../node_modules/.vite/chat',
    server: {
        port: 4200,
        host: 'localhost',
        fs: {
            allow: [searchForWorkspaceRoot(process.cwd())],
        },
        proxy: {
            '/api': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                secure: false,
                ws: true,
                configure: (proxy) => {
                    proxy.on('proxyReq', (proxyReq, req, res) => {
                        const hostname = req.headers.host?.split(':')[0] || '';
                        proxyReq.setHeader('host', hostname);
                    });
                },
            },
            '/ws/': {
                target: 'http://localhost:3000/',
                changeOrigin: true,
                secure: false,
                ws: true,
            },
        },
    },

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

    plugins: [
        svelte(),
        nxViteTsPaths(),
        nodePolyfills({
            include: ['process'],
        }),
    ],
    // Uncomment this if you are using workers.
    //worker: {
    // plugins: [ nxViteTsPaths() ],
    //},
    test: {
        reporters: ['default'],
        coverage: {
            reportsDirectory: '../../../coverage/apps/ui/chat',
            provider: 'v8',
        },
        globals: true,
        cache: {
            dir: '../../../node_modules/.vitest',
        },
        environment: 'jsdom',
        include: ['src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    },
});

Now my app loads, but it fails to connect to the socket.io server with error Error: timeout. It does not reach the server, but when I connect to it via Postman, it works. I've been trying to troubleshoot this for the past 2 days but I am not really getting anywhere, anyone could please shed some light on what I might need to make this work again?

thanks!

versions:

        "socket.io-client": "^4.8.1",
        "socket.io": "^4.8.1",
        "@nestjs/platform-socket.io": "^10.4.6",

[faileon]

updating vite and @sveltejs/vite-plugin-svelte to latest seems to have resolved the issue...