socket.io-client: Cannot access "child_process.spawn" in client code, with Vite 3.0 and Socket 2.5.0

Describe the bug Issue with xmlhttprequest-ssl and vite 3.0 when doing vite or vite build & vite preview

To Reproduce Socket.IO client version: 2.5.0 Vite version: 3.0 React version: 18.2.0

Client We set the socket connection in abstract way with react-query. The connection part looks pretty the same as your example with some tweaks, but the issue is probably deeper inside the package xmlhttprequest-ssl

import { io } from "socket.io-client";

const _socket = io(`${import.meta.env.VITE_WSS_URL}`, {
  query: {
    pathname: window.location.pathname,
    sw: window.innerWidth,
    sh: window.innerHeight,
    b: browser?.name,
    token: response.token,
    p: 'example',
  },
  transports: ['websocket'],
});

Expected behavior The socket connection should be successfully established, and we should receive events

Platform:

Chromium 102

Additional context As an error we receive

browser-external:child_process:9 Uncaught Error: Module "child_process" has been externalized for browser compatibility. Cannot access "child_process.spawn" in client code.

which leads us to image (1) It also might be connected with new Vite’s websocket connection strategy https://vitejs.dev/blog/announcing-vite3.html#dev-improvements

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 7
Comments: 16 (2 by maintainers)

Commits related to this issue

fix: fix usage with vite It seems vite has issues with absolute dependencies in the "browser" field, so we'll provide a quick workaround. Backported from https://github.com/socketio/engine.io-client... — committed to socketio/engine.io-client by darrachequesne 2 years ago

Most upvoted comments

try to use @esbuild-plugins/node-modules-polyfill

vite.config.ts as follow

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { NodeModulesPolyfillPlugin } from "@esbuild-plugins/node-modules-polyfill";

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    esbuildOptions: {
      plugins: [NodeModulesPolyfillPlugin()],
    },
  },
});

Levix0501 on Aug 17, 2022

OK, so this should fix the issue: https://github.com/socketio/engine.io-client/commit/280de368092b17648b59b7467fa49f2425edcd45

Included in engine.io-client@3.5.3, which should be transitively imported by socket.io-client@2.5.0.

Can anyone confirm please?

darrachequesne on Sep 7, 2022

I can confirm that it magically started working again, so I assume it’s because of that.

gustojs on Sep 24, 2022

Some of us are still stuck using socket.io-client 2.x specifically. For example Feathersjs v4 only works with 2.x. While it’s solved in the upcoming v5, most devs are using the stable release. So we cannot update to @latest.

gustojs on Aug 14, 2022