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

Issue Analytics

State:
Created a year ago
Reactions:7
Comments:16 (2 by maintainers)

Top GitHub Comments

6reactions

Luff-JMcommented, Aug 17, 2022

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()],
    },
  },
});

3reactions

darrachequesnecommented, Sep 7, 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?

Top Results From Across the Web

uncaught error: module "child_process" has been externalized ...

Module "child_process" has been externalized for browser compatibility. Cannot access "child_process.spawn" in client code. Environment. Operating System: MacOS ...

Child process | Node.js v19.3.0 Documentation

The node:child_process module provides the ability to spawn subprocesses in a manner that is similar, but not identical, to popen(3) .

JavaScript API | Vite (main branch)

When using createServer and build in the same Node.js process, both functions rely on process.env. NODE_ENV to work properly, which also depends on...

How do I debug "Error: spawn ENOENT" on node.js?

In this way you can easily know which command actually is executed and then you can find out why nodejs cannot find the...

child process

child_process.exec() : spawns a shell and runs a command within that shell, passing the stdout and stderr to a callback function when complete ......