this.transport is not a constructor error on subscriptions

Bug report

When trying to connect to a subscription through Supabase, it throws an error, stating

[Vue warn]: Unhandled error during execution of setup function 
  at <App>

 ERROR  [worker] this.transport is not a constructor                                   10:10:52

  at RealtimeClient.connect (.nuxt/dist/server/server.mjs:6101:21)
  at SupabaseQueryBuilder.on (.nuxt/dist/server/server.mjs:4612:28)
  at setup (.nuxt/dist/server/server.mjs:8802:22)
  at _sfc_main.setup (.nuxt/dist/server/server.mjs:8821:23)
  at callWithErrorHandling (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)
  at setupStatefulComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6977:29)
  at setupComponent (node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:6933:11)
  at renderComponentVNode (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:198:17)
  at Module.ssrRenderComponent (node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:12)
  at default (.nuxt/dist/server/server.mjs:8260:37)

Describe the bug

It seems to generate anytime a subscription is initiated. I even attempted to import the realtime-js library direction instead of through the nuxt3 supabase module and it produced the same error.

Here is the code I used to generate the error. Everything else was initial project generated code.

app.vue

<script setup lang="ts">
const client = useSupabaseClient();

client.from("*").on("*", (payload) => {
  console.log("Change received!", payload);
});
</script>

<template>
  <div></div>
</template>

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Setup a new project for Nuxt3
2. Add in Nuxt3 module for Supabase and add in your environment variables.
3. Replace app.vue with the example above.
4. Run yarn dev and navigate to site.

Expected behavior

The subscription should make the connection and perform as expected.

Screenshots

System information

• OS: macOS
• Browser (if applies) firefox, safari
• Version of supabase-js: 1.33.2
• Versoin of realtime-js: 1.6.0
• Version of Nuxt: 3.0.0-27480376.fdd38f9
• Version of Node.js: 16.14.2

[lstegger]

I had the same problem and I think it is due to SSR. You want the subscription to take place clientside. Thus, I wrapped it in the onMounted hook like this and it works for me:

// Create a function to handle inserts
const handleInserts = (payload) => {
  console.log('Change received!', payload)
}

// Listen to unserts
onMounted(async () => {
  const { data, error } = await client
    .from('biddings')
    .on('INSERT', handleInserts)
    .subscribe()
})

[w3b6x9]

@justinleapline no problem!

can you please try realtime-js@v1.4.2 and then realtime-js@v1.4.3? i’m trying to isolate the issue.