Vite CJS / ESM module import issue (`Cannot read properties of undefined (reading 'WebsocketProvider')`)

[JulianCataldo]

Hello there :)

Environments : Astro or Vite, same symptom.

The error:

Cannot read properties of undefined (reading 'WebsocketProvider')

Full live reproduction:

https://codesandbox.io/p/sandbox/inspiring-danny-ryi6q5?file=%2Fsrc%2Fyjs.ts&selection=%5B%7B%22endColumn%22%3A33%2C%22endLineNumber%22%3A11%2C%22startColumn%22%3A33%2C%22startLineNumber%22%3A11%7D%5D

The fix:

// import { WebsocketProvider } from "y-websocket";
// HACK: Import from source directly
import { WebsocketProvider } from "/node_modules/y-websocket/src/y-websocket.js";

Cheers

_{Huly®: YJS-575}

[dmonad]

I just updated rollup. Maybe that helps. The generated cjs module sets some weird properties on exports in the cjs module.

Can you please try out y-websocket@1.5.0?

[JulianCataldo]

Hello @dmonad, thanks for you prompt response, I really appreciate your work!

Indeed, I saw some weird fields on the package.json, wondering why Vite / Rollup were loading the CJS instead of the ESM (maybe because a peer dep. is CJS, so that align everything…). It's an error I often encounter in the JS eco-system, sadly.

I still have the Cannot read properties of undefined (reading 'WebsocketProvider') error after updating to 1.5.0.

Thank you.

[dmonad]

Vite should use the file specified by the module field (apparently, that's what bundlers now agree on). Otherwise, it can use both the mjs and the cjs version, depending on how you load the package (import uses mjs, require uses cjs). Vite still seems to prefer the cjs version..

You can try doing import W from 'y-websocket'; new W.WebsocketProvider?

Anyway, I don't think this is a y-websocket issue. I know that the current bundler works with most bundlers. If there is something specific I can do, I'm happy to help. But I really don't want to debug specific bundlers.

I won't work on this issue. Maybe you can help and figure out what's going on?

[JulianCataldo]

Hello :),

Just a courtesy update to not leave people in the dark:

I'm actually trying Hocus Pocus server + provider which, I think, is using y-websocket under the hood. It doesn't present bundler issues.

However I could, at some point, use the lower-level package again. In this case, I'll do my best to debug that (I'm not very experienced with CJS/ESM specific issues, that's why I try to keep everything 100% ESM whenever it's possible, or rely on the bundler magic).

[scenaristeur]

@JulianCataldo last version of y-websocket (2.0.2) includes ESM support . here is how i use it in vite/vue https://github.com/scenaristeur/igora/blob/main/igora_web/src/lib/user.js