Socket.io 4.2.x broken with Vite

[tcastelly]

Describe the bug

Hello,

After an upgrade from socket.io 4.1.x to 4.2.x, it's not possible anymore to listen events.

Reproduction

I've created a project with three branches to reproduce the error:

With Webpack it works
https://github.com/shenron/issue-vue-vite-socket

With Vite it works only with socket.io 4.1.3
https://github.com/shenron/issue-vue-vite-socket/tree/vite-socket-4.1.3

With the last version of socket it's broken
https://github.com/shenron/issue-vue-vite-socket/tree/vite

System Info

System:
    OS: Linux 5.10 Arch Linux
    CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
    Memory: 22.09 GB / 31.34 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chromium: 92.0.4515.159

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[holygekko]

I have a similar problem. When using socket.io-client 4.2.x running vite in test/dev mode (vite --host --mode test) it can't use polling. After downgrading to 4.1.3 it works. Also, if I build my project (with 4.2.x) and deploy it also works!

A different solution could als be to create a connection setting the transport option to 'websocket' first:
const socket = io("https://example.com", { transports: ["websocket"] });

That it skips the polling and it works with 4.2.x, but you don't have a fallback option than.

[tcastelly]

Thank you @holygekko for our feedback. Changing the transports tor websocket works for me,

[darrachequesne]

I could indeed reproduce the issue, it seems the browser field is ignored here: https://github.com/socketio/engine.io-client/blob/c7e27b0b1dc778e1fd79af2140641e745cfd6270/package.json#L73

So the xmlhttprequest-ssl module, which is an implementation of XMLHttpRequest for Node.js, is loaded in the browser:

// node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js
var require_XMLHttpRequest = __commonJS({
  "node_modules/xmlhttprequest-ssl/lib/XMLHttpRequest.js"(exports, module) {
    var fs = (init_fs(), fs_exports);
    var Url = (init_url(), url_exports);
    var spawn = (init_child_process(), child_process_exports).spawn;
    module.exports = XMLHttpRequest;
    XMLHttpRequest.XMLHttpRequest = XMLHttpRequest;
    function XMLHttpRequest(opts) {
      "use strict";
      opts = opts || {};
      var self2 = this;
      var http = (init_http(), http_exports);
      var https = (init_https(), https_exports);
[...]

Which explains:

• why it breaks in socket.io-client@4.2.0: socketio/engine.io-client@2de8b4e
• why switching to WebSocket only works too (xmlhttprequest-ssl is only used for HTTP long-polling)

What's weird is that the other fields in the browser object seems to be taken in account. Can someone shed some light on this?

[darrachequesne]

As a workaround, it is possible to force the resolution in vite.config.js:

export default {
  resolve: {
    alias: {
      "xmlhttprequest-ssl": "./node_modules/engine.io-client/lib/xmlhttprequest.js"
    }
  }
}

I don't understand why the "xmlhttprequest-ssl": "./lib/xmlhttprequest.js" alias in the browser section is not taken in account though. It only happens during development, it is properly resolved when building for production.

[darrachequesne]

After a little digging in the resolvePackageEntry method here, it seems that only the browser field of the current package is taken in account, and not its ancestor.

Reproducible case: https://github.com/darrachequesne/vite-browser-issue

Directly using esbuild seems to work though 👀

[marcinczenko]

I had problem with version 2.5.0. Nice to see there are some workarounds to the problem. In the meantime I managed to upgrade socket.io (together with the client) to the most recent version 4.5.1, and there everything seems to be working fine without any extra config. Just reporting.