Error: 'w3cwebsocket' is not exported by node_modules/websocket/index.js when using Rollup

[jlengrand]

Bug report

Describe the bug

When using a simple rollup configuration generated by the open-wc project, and installing the supabase-js dependency, building fails with a Error: 'w3cwebsocket' is not exported by node_modules/websocket/index.js, error.

Here is a more complete stacktrace:

node_modules/@supabase/gotrue-js/dist/module/GoTrueClient.js
1: var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
                   ^
2:   function adopt(value) {
3:     return value instanceof P ? value : new P(function (resolve) {
...and 1 other occurrence

...and 10 other files
(!) Circular dependency
node_modules/@supabase/realtime-js/dist/module/RealtimeSubscription.js -> node_modules/@supabase/realtime-js/dist/module/lib/push.js -> node_modules/@supabase/realtime-js/dist/module/RealtimeSubscription.js
[!] Error: 'w3cwebsocket' is not exported by node_modules/websocket/index.js, imported by node_modules/@supabase/realtime-js/dist/module/RealtimeClient.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
node_modules/@supabase/realtime-js/dist/module/RealtimeClient.js (1:9)
1: var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
            ^

To Reproduce

I have created a test repository to reproduce the issue here. You can either clone the repo and then run $npm install && npm run build or directly click this link to fire a GitPod instance doing it for you :)

Expected behavior

I would expect the supabase-js dependency to not make my build fail

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• Version of supabase-js: [e.g. 1.35.4]
• Version of Node.js: [e.g. 16.15.1]

Additional context

I have found this very similar issue and tried to upgrade the rollup plugin to the latest version as well as apply the rollup common js plugin but then the error changes to

(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/@supabase/supabase-js/dist/module/SupabaseClient.js
1: var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
                   ^
2:   function adopt(value) {
3:     return value instanceof P ? value : new P(function (resolve) {
...and 1 other occurrence
node_modules/@supabase/functions-js/dist/module/index.js
1: var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
                   ^
2:   function adopt(value) {
3:     return value instanceof P ? value : new P(function (resolve) {
...and 1 other occurrence
node_modules/@supabase/gotrue-js/dist/module/GoTrueApi.js
1: var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, generator) {
                   ^
2:   function adopt(value) {
3:     return value instanceof P ? value : new P(function (resolve) {
...and 1 other occurrence

...and 8 other files
[!] (plugin commonjs--resolver) SyntaxError: Unexpected token (2:8)
node_modules/websocket/index.js (2:8)

To reproduce :

or run $git checkout test-common-js; npm install && npm run build

Could you please advise? At the moment I solved the issue by importing the script from a CDN but it's not ideal. Thanks!

[monicakh]

@supabase/backend-team Assigning the PIC of the team @Lakshmipathi to take care of this.

[JasonAtallah]

Was there ever a resolution to this? I'm running into the same issue