can't import sockjs-client to my vue project

[sametsafak]

Describe the bug

I am having an issue like this one: #1547
Except my imported library is sockjs-client

When I remove sockjs-client import line from my code (vuex store module), everything works great.

To reproduce it, I just created a vue project with vite
yarn create vite my-vue-app --template vue

Then import sockjs-client to somewhere in your project (like main.js)
I also added to index.html this polyfill:

<!-- polyfill global because shit dependencies -->
<script>
  const global = globalThis;
</script>
<!-- end polyfill -->

I am not sure if it's directly related with vite. We tried to use socket.io but amazon created some issues with our backend/server structure. I don't know these topics. Therefore we are using this sockjs-client.

Reproduction

https://github.com/sametsafak/reproduction-of-sockjs-issue

System Info

System:
    OS: macOS 12.2.1
    CPU: (10) x64 Apple M1 Max
    Memory: 5.76 GB / 64.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.18.2 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - /usr/local/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Safari: 15.3
  npmPackages:
    @vitejs/plugin-vue: ^2.2.0 => 2.2.4 
    vite: ^2.8.0 => 2.8.6

Used Package Manager

yarn

Logs

Uncaught TypeError: util.inherits is not a function
    at node_modules/eventsource/lib/eventsource.js (eventsource.js:315:6)
    at __require (chunk-OYVF2PGL.js?v=93d66c20:10:50)
    at node_modules/sockjs-client/lib/transport/receiver/eventsource.js (eventsource.js:5:25)
    at __require (chunk-OYVF2PGL.js?v=93d66c20:10:50)
    at node_modules/sockjs-client/lib/transport/eventsource.js (eventsource.js:5:27)
    at __require (chunk-OYVF2PGL.js?v=93d66c20:10:50)
    at node_modules/sockjs-client/lib/transport-list.js (transport-list.js:8:3)
    at __require (chunk-OYVF2PGL.js?v=93d66c20:10:50)
    at node_modules/sockjs-client/lib/entry.js (entry.js:3:21)
    at __require (chunk-OYVF2PGL.js?v=93d66c20:10:50)

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/core 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.

[sapphi-red]

I found that this is happening because browser field is not taken into account when resolving inside a package while optimization.

The following is some outputs extracted from DEBUG="vite:resolve-details" yarn dev.

  vite:resolve-details [package entry] inherits -> C:/Users/green/Downloads/reproduction-of-sockjs-issue-main/node_modules/inherits/inherits_browser.js +8ms
  vite:resolve-details externalized node built-in "events" to empty module. (imported by: C:\Users\green\Downloads\reproduction-of-sockjs-issue-main\node_modules\sockjs-client\lib\transport\websocket.js) +7ms
  vite:resolve-details [package entry] eventsource -> C:/Users/green/Downloads/reproduction-of-sockjs-issue-main/node_modules/eventsource/lib/eventsource.js +5ms

The browser field is like below, so events should be resolved to ./lib/event/emitter.js and also eventsource should be resolved to ./lib/transport/browser/eventsource.js.

  "browser": {
    "./lib/transport/driver/websocket.js": "./lib/transport/browser/websocket.js",
    "eventsource": "./lib/transport/browser/eventsource.js",
    "./lib/transport/driver/xhr.js": "./lib/transport/browser/abstract-xhr.js",
    "crypto": "./lib/utils/browser-crypto.js",
    "events": "./lib/event/emitter.js"
  },

https://github.com/sockjs/sockjs-client/blob/dc105cd6500e99018fc1d701715bdb55812752f3/package.json#L11-L17

But it looks like when a browser field is a simple string, it works correctly as you can see by inherits resolving to node_modules/inherits/inherits_browser.js.

  "browser": "./inherits_browser.js",

https://github.com/isaacs/inherits/blob/e6265134c91f9fb6a3d5e771f034ec94d20c6708/package.json#L16

[sametsafak]

I found a workaround here

So you can use these aliases in vite.config.js to make sockjs-client work in your vite project

export default defineConfig({
  resolve: {
    alias: [
      {
        find: 'eventsource',
        replacement: './node_modules/sockjs-client/lib/transport/browser/eventsource.js',
      },
      {
        find: 'events',
        replacement: './node_modules/sockjs-client/lib/event/emitter.js',
      },
      {
        find: 'crypto',
        replacement: './node_modules/sockjs-client/lib/utils/browser-crypto.js',
      },
    ],
  },
})

[158008001]

@sametsafak

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
      eventsource:
        "./node_modules/sockjs-client/lib/transport/browser/eventsource.js",
      events: "./node_modules/sockjs-client/lib/event/emitter.js",
      crypto: "./node_modules/sockjs-client/lib/utils/browser-crypto.js",
    },
  },
  define: {
    global: {},
  },
});

This does remove all error messages,but now...

[vite] connecting...
Opening Web Socket...
[vite] connected.
Whoops! Lost connection to http://localhost:3333/stomp

With vue-cli, there are no errors and no extra processing required

Maybe, I have to give up using vite.

[sametsafak]

@158008001 mine config is working actually, I tested it. Try to change your config as I did. Not key-value pairs.

But yes, I gave up. I have an experimental branch to check vite periodically. Every time I tested it, it created another issue :) Currently, the old way is better for me.