socketio / socket.io-client

Realtime application framework (client)
https://socket.io
10.62k stars 3.04k forks source link

[socket.io-client 2] Unable to run on webpack >= 5 #1565

Closed giovanni-bertoncelli closed 10 months ago

giovanni-bertoncelli commented 1 year ago

Describe the bug Since I have upgraded an Angular 13 app to Angular 14, that underneath uses webpack@5.74.0, the socket.io-client has a lot of issues and became unusable. All the nodejs polyfills for the ws dependency are gone so I got these kind of errors:

./node_modules/node-gyp-build/index.js:5:9-22 - Error: Module not found: Error: Can't resolve 'os' in '/Users/giovannibertoncelli/workspace/geo/frontend/node_modules/node-gyp-build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

I had to redirect all these dependencies to make it work:

     "zlib": [
        "node_modules/browserify-zlib"
      ],
      "net": [
        "node_modules/net-browserify/"
      ],
      "tls": [
        "node_modules/tls-browserify/"
      ],
      "assert": [
        "node_modules/assert-browserify"
      ],
      "crypto": [
        "node_modules/crypto-browserify"
      ],
      "https": [
        "node_modules/https-browserify"
      ],
      "http": [
        "node_modules/stream-http"
      ],
      "stream": [
        "node_modules/stream-browserify"
      ],
      "timers": [
        "node_modules/timers-browserify"
      ],
      "os": [
        "node_modules/os-browserify"
      ],
      "fs": [
        "node_modules/browserify-fs"
      ]

That's very frustrating since these dependencies where not required before the ng upgrade and I have no actual use for these in my main package.json.

After resolving this issue I've encontered another issue, at runtime:

Uncaught SyntaxError: Unexpected eval or arguments in strict mode

That, I presume, comes from the tls dependency:

image

In order to avoid all this I've installed isomorphic-ws and replaced the ws dependency with this package. Then it has no nodejs dependencies and compiles correctly.

To Reproduce

Socket.IO server version: 2.4.1 Socket.IO client version: 2.5.0

Expected behavior Should compile correctly.

Platform:

darrachequesne commented 1 year ago

Hi @giovanni-bertoncelli , could you please provide a project reproducing the issue? That would help a lot, thanks.

giovanni-bertoncelli commented 1 year ago

@darrachequesne https://codesandbox.io/s/serene-thunder-edirx3?file=/tsconfig.json here you can find a similar behaviour

darrachequesne commented 1 year ago

@giovanni-bertoncelli thanks, I could indeed reproduce. I'm investigating.

giovanni-bertoncelli commented 1 year ago

It may be similar to this issue @darrachequesne: https://github.com/socketio/socket.io-client/issues/1088 Maybe it's actually the same behaviour

darrachequesne commented 1 year ago

I'm not able to reproduce with a project created with @ng/cli: https://github.com/socketio/socket.io-fiddle/tree/angular-sio-v2

Could it be linked to the CodeSandbox platform?

giovanni-bertoncelli commented 1 year ago

Don't think so... the issue compared initially in a local project.. maybe try with a ng14 project locally on your machine