Uncaught (in promise) DOMException: Proxy object could not be cloned.

[michael-learns]

I'm getting this issue:

I'm trying to insert my data like so

DB definition is based on below

With the drizzleSchema being

And the schema of the inventory purchase is

I'm using drizzle-orm/sqlite-core

[Chriztiaan]

Hey @michael-learns, I see you are using Vue - are you using Nuxt too? We have seen a similar problem in Nuxt in previous issues (discussed on Discord) you can read more about it here: https://discord.com/channels/1138230179878154300/1245001501152378890/1247475355967815815

Are you using our usePowerSync() hook by chance? toRaw might be needed.

const powerSync = usePowerSync();

powerSync.value.init();
const l = connector.registerListener({
  initialized: () => {},
  sessionStarted: () => {     
      toRaw(powerSync.value).connect(connector);
  },
});

[michael-learns]

i'm using Vite.

I'm not quite sure where to place that code.

[Chriztiaan]

Can you provide the snippet where you currently call .connect?

[michael-learns]

@Chriztiaan I don't. I'm using supabase as my backend and this is how it's setup.

This is in my App.vue

[michael-learns]

I'm trying option 1 based on the suggested solution in the discord link you provided

But I'm hesitant to proceed with this solution because of the the Caution in the Vue docs for markRaw

[Chriztiaan]

I see! So my understanding is that either marking it as raw when creating the plugin, or converting to raw when connecting should be fine. The reason this is required is because Vue uses a Proxy class class for its reactivity which will break when we clone some of the information when passed via Comlink/Workers.

I would recommend

sessionStarted: () => {     
      toRaw(powerSync.value).connect(connector); // this shouldn't be dangerous to you as you don't access the powerSync value passed in here
  },

over doing it on creation of the plugin.

[michael-learns]

Thanks @Chriztiaan ! The only issue now is what is connector?

[Chriztiaan]

A connector is what we use resolve the credentials and handle the upload of data from the client.
A Supabase connector example can be seen here: https://github.com/powersync-ja/powersync-js/blob/main/demos/vue-supabase-todolist/src/library/powersync/SupabaseConnector.ts
More about that here: https://docs.powersync.com/installation/client-side-setup/integrating-with-your-backend#integrate-with-your-backend

[michael-learns]

Thanks @Chriztiaan! I got it. How do I use l then?

[Chriztiaan]

I see for our Vue example: https://github.com/powersync-ja/powersync-js/blob/main/demos/vue-supabase-todolist/src/App.vue
That we don't clear the listener, you could probably add an unmount/destroy hook call that calls l.