Json type: Type instantiation is excessively deep and possibly infinite.

[michaelpumo]

Bug report

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I have a Vue/Nuxt project with TypeScript which is throwing me an error with the profile table when I try to assign it to a variable based on the types generated from the DB. "Type instantiation is excessively deep and possibly infinite."

The problematic column in question is one called "links" which stores JSONB data. The type that is generated from the Supabase Cli using the command npx supabase gen types typescript creates a self referencing type called Json.

export type Json =
  | string
  | number
  | boolean
  | null
  | { [key: string]: Json | undefined }
  | Json[]

With my (generated) profile row types looking like:

profile: {
  Row: {
    about: string | null
    available: string | null
    avatar: string | null
    avatar_url: string | null
    created_at: string | null
    id: number
    links: Json | null // this is the problematic column.
    location: string | null
    name: string | null
    poster: string | null
    poster_url: string | null
    tagline: string | null
    updated_at: string
    user_id: string
    username: string | null
  }
}

In my Pinia Vue store I get the following error when trying to assign it against these types.

import type { Database } from '@/types/supabase'
import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({
    profile: null as Database['public']['Tables']['profile']['Row'] | null
  }),
  actions: {
    setProfile(profile: Database['public']['Tables']['profile']['Row'] | null) {
      this.profile = profile // Here is where the TS error occurs.
    }
  }
})

I'm guessing this error happens because the generated type is self referencing and TS does not know how deep it would be?

To Reproduce

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

1. Create a column and set its type to jsonb
2. Generate types using the Supabase Cli
3. Try to do something similar and see that TS complains.

Expected behavior

There should be no TS error.

Screenshots

System information

• OS: Apple Macbook Pro M2 Ventura 13.4
• Version of supabase-js: 2.26.0
• Version of Node.js: 18.16.0

Additional context

I have not been able to see similar issues with other Supabase users but perhaps the use of JSONB is quite rare?

[rahulretnan]

I'm also facing same issue

[soedirgo]

Hey there, what version of TypeScript are you on? Also, can you put up an example project that demonstrates the issue so I can replicate it?

[soedirgo]

FWIW this seems to run fine: https://www.typescriptlang.org/play?#code/C4TwDgpgBAUgzgewHZQLwCgpQD5TsAJwEskBzTHKJAVwFsAjCAi3ehBAGwgEMkWrqHDvwDeUANoBrCCABceQiVIBdefGSVqSACYQAZiQjaoAX37qk45UA

[michaelpumo]

I did a little more digging and I think it may be an issue in combination with Vue's reactivity and not directly Supabase afterall. You may see something similar with React?

If I try to a assign to a simple variable with let for example it's okay but using ref() in Vue causes the warning, possibly due to Vue / TS not knowing how deep it would have to watch the reactive object.

If I use shallowRef() instead, it's fine: https://vuejs.org/api/reactivity-advanced.html#shallowref

[LeOndaz]

Bump

[antoniormrzz]

The Json type does reference itself. Could it be that? I've also been having the same problem with the Json type columns.

Edit: changed my generated Json type to this and it all went away:

export type Json =
  | string
  | number
  | boolean
  | null
  | { [key: string]: any | undefined }
  | any[]

The error is complaining in my opinion that the line | { [key: string]: Json | undefined } has no end to type instantiation, which when you think about it, is true.

[ScreamZ]

Same issue here does anyone find a good and secure workaround?

• @soedirgo Here is a reproduction sandbox Playground link
• @michaelpumo Any news on your side?
• @antoniormrzz Not a scalable and stable hack, get an override on every synchronization
• @jcalz Don't know if you're active the same amount of time on GitHub as StackOverflow, but this might be one for you… 😅

I did a little more digging and I think it may be an issue in combination with Vue's reactivity and not directly Supabase afterall. You may see something similar with React?

If I try to a assign to a simple variable with let for example it's okay but using ref() in Vue causes the warning, possibly due to Vue / TS not knowing how deep it would have to watch the reactive object.

If I use shallowRef() instead, it's fine: vuejs.org/api/reactivity-advanced.html#shallowref

Any way to manage this in pinia store without using composition ?

[Grovespaz]

Just wanted to confirm this is still an issue at time of writing with the latest version of Vue and supabase-js and makes it impossible to work with supabase-js in any serious capacity when using Typescript and Vue.

[shanehoban]

Fix I'm using is to update your supabase generated types to have Json as below:

export type Json = Record<string, any>

[encima]

Bringing the comments from the related issue made for the CLI here.

Summary of suggestions:

1. @daniel-j-h suggests to create all Json types as unknown and allow the developer to decide
2. @shanehoban suggests creating a Json type as Record with a string key and any value
3. @lauri865 suggests using the MergeDeep from the typefest library
4. @antoniormrzz suggests changing the Json type to any
5. @michaelpumo suggests that this could be a combination of Supabase's type generation coupled with Vue's reference handling for watching objects

[Keagel]

Using this StackOverflow post as an example, I have modified it for the Json type:

export type Json<D extends number = 9, DA extends any[] = []> =
	| string
	| number
	| boolean
	| null
	| (D extends DA['length'] ? any : { [key: string]: Json<D, [0, ...DA]> | undefined })
	| (D extends DA['length'] ? any : Json<D, [0, ...DA]>[]);

D defines the depth limit. When the depth limit is reached (D extends DA['length']), any is used to stop the recursion.
Might require some testing but it works for me and retains type safety.

[eybel]

Its probably that loop of autoreferencing without finishing the main json reference.

@encima

I would suggest the following solution, since I implemented this, I’ve never had a problem:

type Primitive = string | number | boolean | null;

type JsonObject = { [key: string]: Json | undefined };

type JsonArray = Json[];

export type Json = Primitive | JsonObject | JsonArray;