[feature request] export contents of "client-dist" directory for use with Webpack

[warren-bank]

issue:

client-side code that is bundled with Webpack cannot:

  import { io } from "socket.io/client-dist/socket.io.esm.min.js"

produces:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]:
Package path ./client-dist/socket.io.esm.min.js is not exported.

currently, the only workaround is to resolve by relative path:

  import { io } from "../../../../node_modules/socket.io/client-dist/socket.io.esm.min.js"

..which is incredibly brittle, and difficult to maintain

code:

package.json exports

• currently:

    "exports": {
      "import": "./wrapper.mjs",
      "require": "./dist/index.js",
      "types": "./dist/index.d.ts"
    },

• proposed:

    "exports": {
      ".": {
        "import":  "./wrapper.mjs",
        "require": "./dist/index.js",
        "types":   "./dist/index.d.ts"
      },
      "./client-dist": {
        "import":  "./client-dist/socket.io.esm.min.js",
        "require": "./client-dist/socket.io.min.js"
      },
      "./client-dist/*":     "./client-dist/*.js",
      "./client-dist/*.js":  "./client-dist/*.js",
      "./client-dist/*.map": "./client-dist/*.map"
    },

related docs:

• Package entry points
• Conditional exports

[darrachequesne]

Hi! You are right, the ESM bundle is not currently exported in the socket.io-client package: https://github.com/socketio/socket.io-client/blob/18c6e0a6da23999ad128cfb47a90ff09148c84d6/package.json#L20-L32

I guess we could export it (in the socket.io-client package, not socket.io), what do you think?

[warren-bank]

I should probably skim the README before asking for clarification.,
but based on your previous comment..
is my understanding correct that:

• the socket.io npm package contains both:
  • a server-side library, which is exported
  • a client-side library, which is not exported
• the socket.io-client npm package contains:
  • a duplicate copy of the client-side library, which is exported

For a project that requires both libraries (client/server),
isn't it redundant to have to import both npm packages?

Wouldn't it make more sense to either:

1. remove the client-side library from the socket.io npm package
2. keep it, and allow it to be accessed

[warren-bank]

though, strictly speaking, with respect to the original issue that I raise about importing the client library for use with Webpack..

another (more robust) workaround is to:

1. in addition to the socket.io npm package, which is installed as a project dependency..
   install the socket.io-client npm package as a dev dependency, only for use with Webpack:
   npm install --save-dev socket.io-client
2. in the client-side code that is bundled by Webpack, import the client library as such:
   import * as SIC from "socket.io-client/dist/socket.io.js"
3. profit..
   const { io } = SIC

[darrachequesne]

Hmm, isn't import { io } from "socket.io-client" sufficient?

Reference: https://socket.io/docs/v4/client-with-bundlers/

[warren-bank]

yes, you're right.. it appears so:

socket.io-client/package.json

  "exports": {
    "./package.json": "./package.json",
    "./dist/socket.io.js": "./dist/socket.io.js",
    "./dist/socket.io.js.map": "./dist/socket.io.js.map",
    ".": {
      "import": {
        "node": "./build/esm-debug/index.js",
        "default": "./build/esm/index.js"
      },
      "require": "./build/cjs/index.js",
      "types": "./build/esm/index.d.ts"
    }
  },

socket.io-client/build/esm-debug/index.js

export { Manager, Socket, lookup as io, lookup as connect, lookup as default, }

socket.io-client/build/esm/index.js

export { Manager, Socket, lookup as io, lookup as connect, lookup as default, }

Does Webpack match the node conditional, and import the ESM version with debug log statements?
Not that it would really matter.

In any case, I'm all set.. I can get what I need from the socket.io-client package as a dev dependency.
Thanks for all the help.
Should I close this issue?