Moving from 4.1.3 to 4.2.0 -> xmlhttprequest-ssl' relative to engine.io-client error

[hardcodet]

Describe the bug

I was toying around with socket.io in codesandbox.io, and experienced a crash pretty much right away. When switching to 4.1.3, the error went away:

ModuleNotFoundError
Could not find module in path: 'xmlhttprequest-ssl' relative to '/node_modules/engine.io-client/lib/transports/index.js'

To Reproduce

• codesandbox.io/
• add a reference to 4.2.0 and initialize a socket -> will crash
• downgrade to 4.1.3 -> workd

Please fill the following code example:

Socket.IO server version: x.y.z

Client (4.2.0)

mport { io, Socket } from "socket.io-client";
import { config } from "./config";

export class SocketClient {
  socket: Socket;

  constructor() {
    this.socket = io("http://localhost:3000", {});
  }
}

[darrachequesne]

We used a fork of xmlhttprequest-ssl, until the changes were merged upstream. We have removed our fork in socket.io-client@4.2.0, which may explain (or at least, be linked to) your issue: socketio/engine.io-client@2de8b4e

But switching version should properly resolve the dependencies, so I guess it's a problem with codesandbox?

[alpha-titan]

There are some bugs in the 4.2.0 client, I am not able to connect to the server.

I have enabled CORS on the socket server as well as the express server

I was stuck at this issue for hours tried everything no luck establish a WebSocket connection with the server, finally downgraded to 4.1.3

The below code works on 4.1.3 and doesn't work on 4.2.0

const [socket, setSocket] = useState();
const handleSocket = () => {
        newSocket = io("ws://localhost:4000");
	newSocket.connect();
	console.log(newSocket.connected);
        setSocket(newSocket);
}
useEffect(()=>{
         handleSocket();
},[setSocket])

Upon inspecting Network for ws connections

using 4.1.3 connection is created

using 4.2.0 pending

when I use the CDN and comment out the import it works again.

[hardcodet]

@darrachequesne Could well be a codesandbox issue - I just did a quick hello world there, but wanted to report it in case it would be of interest to you.

OTOH, I would assume that codesandbox generically just downloads packages as specified in package.json, so I'm not sure it could be buggy there and make any assumptions (in the end, it did end up with code that was referring to that SSL library).

@alpha-titan Looks like your issue is not related to the one reported here?

[darrachequesne]

@alpha-titan I was not able to reproduce, could you please check https://github.com/socketio/socket.io-fiddle/tree/issues/socket.io/1494? Could you please open a new issue with all necessary details?

@hardcodet I could in fact reproduce:

I don't understand why though. A fresh "npm install" or "yarn add" both includes the xmlhttprequest-ssl package:

$ npm ls xmlhttprequest-ssl
/test
└─┬ socket.io-client@4.2.0
  └─┬ engine.io-client@5.2.0
    └── xmlhttprequest-ssl@2.0.0

If someone can shed some light on this...

[alpha-titan]

@darrachequesne I have a Reactclient (created with vite.js) with version socket4.2.0and anexpress serverrunning on differentport` and I was not possible to establish a connection.

[alpha-titan]

@hardcodet Yeah sorry for that I will open a new Issue

[louisgv]

I encountered this while upgrading to 4.2.0 in react-native environment. The metro bundler gave this error:

Unable to resolve module ../../contrib/xmlhttprequest-ssl/XMLHttpRequest from P:\Projects\considr\ponde
r\native\node_modules\engine.io-client\lib\transports\index.js:

None of these files exist:

• node_modules\engine.io-client\contrib\xmlhttprequest-ssl\XMLHttpRequest(.native|.ios.ts|.native.ts|
  .ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.
  json)
• node_modules\engine.io-client\contrib\xmlhttprequest-ssl\XMLHttpRequest\index(.native|.ios.ts|.nati
  ve.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.
  json|.json)

1 | const XMLHttpRequest = require("xmlhttprequest-ssl");
2 | const XHR = require("./polling-xhr");
3 | const JSONP = require("./polling-jsonp");
4 | const websocket = require("./websocket");

Doing npm ls show the package was installed:

$ npm ls xmlhttprequest-ssl
`-- socket.io-client@4.2.0
  `-- engine.io-client@5.2.0
    `-- xmlhttprequest-ssl@2.0.0

[louisgv]

It seems the core issue is that somehow the bundler is trying to resolve the package relatively from the old path (from 4.1.3). Based on the log above, it's trying to find the package in node_modules\engine.io-client\contrib\xmlhttprequest-ssl still

Maybe the dist generated still has the old artifact?

[louisgv]

Very weird - I grep through the installed code in node_modules for contrib and nothing was found. I have reinstall my dependencies a couple time and still seeing the issue.

[darrachequesne]

@louisgv did you try to reset metro-s cache with --reset-cache?

Reference: https://facebook.github.io/metro/docs/troubleshooting

[jsjoeio]

I'm seeing a similar issue. I landed on this CodeSandbox from this article.

Updating "socket.io-client": "2.3.0" -> 4.2.0 results in the same error. I wonder if this is specific to CodeSandbox 🤔

[jsjoeio]

@darrachequesne I found this: codesandbox/codesandbox-client#4456 (comment)