TS: Exported variable X has or is using name Y from external module Z but cannot be named.ts(4023)

[JK-Effects]

Describe the bug
There are many type errors shown within the editor (VS code) that result from the use of the ‘socket’ type.
Building the application does not throw any TypeErrors.

I use the client in a Pinia store in Vue.
As soon as the Socket type is used within the store definition, the editor shows an error.
When using the variable connection via imports, this error extends to the entire files where the variable is used.

Is this due to the use with Pinia or Vue or the defined types in the socket-io client?

To Reproduce

Socket.IO client version: ^4.8.1

"vue": "^3.4.29",
"vue-router": "^4.3.3"
"pinia": "^2.3.0",
"vite": "^5.3.1",

"@tsconfig/node20": "^20.1.4",
"@types/eslint": "~9.6.0",
"@types/node": "^20.14.5",

Client

import { defineStore } from "pinia";
import { io, type Socket } from "socket.io-client";

export const useConnectionStore = defineStore("connection", {
  state: () => {
    return {
      connection: undefined as undefined | Socket,
    };
  },
  getters: {
    connectionStatus: (state) => !!state.connection,
  },
  actions: {
    connectClient(): void {
      if (this.connectionStatus) return;
      this.connection?.disconnect();
      this.connection = io("<server url>", {
        reconnection: true,
        reconnectionDelayMax: 10000,
        auth: (cb) => {
          cb({ token: localStorage.getItem("accessToken") });
        },
      });

      this.connection.on("connect", () => {
        console.log("success");
      });
      this.connection.on("connect_error", (err) => {
        console.log(err);
      });
      this.connection.on("disconnecting", () => {
        this.connection?.disconnect();
      });
      this.connection.on("disconnect", () => {
        this.$reset();
      });
      this.connection.on("error", (msg: string) => {
        console.log(msg);
      });
    },
    disconnectClient(): void {
      this.connection?.disconnect();
    },
  },
});

Expected behavior
No type errors should be displayed in the editor.

Platform:

• OS: Win10

Additional context
Shown Type Errors:

Exported variable 'useConnectionStore' has or is using name 'Cookie' from external module "<path>/node_modules/engine.io-client/build/esm/globals.node" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'HandshakeData' from external module "<path>/node_modules/engine.io-client/build/esm/socket" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'ManagerReservedEvents' from external module "<path>/node_modules/socket.io-client/build/esm/manager" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'SocketReservedEvents' from external module "<path>/node_modules/engine.io-client/build/esm/socket" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'SocketReservedEvents' from external module "<path>/node_modules/socket.io-client/build/esm/socket" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'TransportReservedEvents' from external module "<path>/node_modules/engine.io-client/build/esm/transport" but cannot be named.ts(4023)
Exported variable 'useConnectionStore' has or is using name 'WriteOptions' from external module "<path>/node_modules/engine.io-client/build/esm/socket" but cannot be named.ts(4023)

[darrachequesne]

Hi! Have you found the culprit?

The failing types (Cookie, HandshakeData, ...) are all unexported interfaces, maybe that could explain the problem? Which version of the typescript compiler are you using?

[JK-Effects]

Hi,
I am using typscript "~5.4.0" with vue-tsc "^2.0.21".

[SnowingFox]

Opened a PR to address this: #5533