Getting type instantiation error #4224

Slate245 · 2022-07-26T06:50:38Z

Describe the bug

Hi, I'm still getting used to the library and most likely am doing something wrong.

Still, I want to use internationalized strings as headers in some of my columns. The compiler throws TS2589 error: Type instantiation is excessively deep and possibly infinite, pointing to a place where i call my translation function, which return simple string, not a deep literal type.

Curiously, when I replace the call with a simple string, the error moves to accessor function for this column.

ColumnDef for this column looks something like this:

columnHelper.accessor((transaction) => DateTime.fromJSDate(transaction?.created_at).toUTC(), {
	cell: (props) => (
		<Text title={props.getValue().toRelativeCalendar() ?? ""}>
			{props.getValue().toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS)}
		</Text>
	),
	id: "created_at",
	header: t("sections.main.transactions.items.created_at"),
}),

I'm sorry I can't provide reproducible example, because I feel the problem is really project-dependant. I'm creating this issue asking mostly for answers on how to tame inferrance in tanstack-table, so I can avoid similar problems

Your minimal, reproducible example

no link

Steps to reproduce

Define columns in a memo, providing a call to t function from react-18next as a header of a column.
Try to compile the app

Expected behavior

I expect the app to compile correctly

How often does this bug happen?

Sometimes

Screenshots or Videos

No response

Platform

Linux

react-table version

v8.3.3

TypeScript version

v4.4.2

Additional context

No response

Terms & Code of Conduct

I agree to follow this project's Code of Conduct
I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

tannerlinsley · 2022-07-26T13:08:41Z

Please post the errors you are seeing

…

On Jul 26, 2022, 12:50 AM -0600, Ivan Bespalov ***@***.***>, wrote: Describe the bug Hi, I'm still getting used to the library and most likely am doing something wrong. Still, I want to use internationalized strings as headers in some of my columns. The compiler throws TS2589 error: Type instantiation is excessively deep and possibly infinite, pointing to a place where i call my translation function, which return simple string, not a deep literal type. Curiously, when I replace the call with a simple string, the error moves to accessor function for this column. ColumnDef for this column looks something like this: columnHelper.accessor((transaction) => DateTime.fromJSDate(transaction?.created_at).toUTC(), { cell: (props) => ( <Text title={props.getValue().toRelativeCalendar() ?? ""}> {props.getValue().toLocaleString(DateTime.DATETIME_SHORT_WITH_SECONDS)} </Text> ), id: "created_at", header: t("sections.main.transactions.items.created_at"), }), I'm sorry I can't provide reproducible example, because I feel the problem is really project-dependant. I'm creating this issue asking mostly for answers on how to tame inferrance in tanstack-table, so I can avoid similar problems Your minimal, reproducible example no link Steps to reproduce 1. Define columns in a memo, providing a call to t function from react-18next as a header of a column. 2. Try to compile the app Expected behavior I expect the app to compile correctly How often does this bug happen? Sometimes Screenshots or Videos No response Platform Linux react-table version v8.3.3 TypeScript version v4.4.2 Additional context No response Terms & Code of Conduct • I agree to follow this project's Code of Conduct • I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

spfoos · 2022-07-26T22:46:28Z

I'm facing this as well (I think):

TS2589: Type instantiation is excessively deep and possibly infinite.

It's on columnHelper.accessor

tannerlinsley · 2022-07-26T22:59:03Z

I’ll need something reproducible to debug :/

Slate245 · 2022-07-27T05:26:00Z

It may happen due to some project-specific stuff. Because I tried adding {incremental: false} to tsconfig and the error went away. Even after I reverted tsconfig back to it's original state 😕.

dcworldwide · 2022-08-01T04:08:14Z

This issue began after 8.2.6. 8.2.6 is the latest version we are able to run for the time being.

A reduced example below. Prefer the ColumnDef syntax over the newly introduced Helper.

        const columns = React.useMemo<ColumnDef<Order>[]>(() => {

        let orderColumns: ColumnDef<Order>[] = []
        let commissionColumns: ColumnDef<Order>[] = []

        orderColumns.push({
            header: t("Id"),
            accessorKey: "orderRefId",
            size: 80,
            cell: props => {
                let o = props.row.original
                return <Link component={RouterLink} to={`/dashboard/${o.sId}/o/${o.id}`}>{o.orderRefId}</Link>
            }
        })

        commissionColumns.push({
            header: t("Paid Date"),
            accessorKey: "paymentPaidAt",
            minSize: 120,
            cell: props => {
                let o = props.row.original
                let paidAt = o.paymentPaidAt && o.paymentStatus != PaymentStatus.Unpaid
                    ? formatDate(o.paymentPaidAt)
                    : "-"
                return <div>{paidAt}</div>
            }
        })
        
        let columns: ColumnDef<Order>[] = []

        if (opts.enableSelection) {
            columns.push(makeTableCheckboxColumn())
        }

        columns.push({
            header: t("Order"),
            columns: orderColumns
        })

        columns.push({
            header: t("Commission"),
            columns: commissionColumns
        })

        return columns

    }, [])

tannerlinsley · 2022-08-02T15:51:29Z

We just shipped new column helper types and better underlying column def types. Please give them a try and report?

himself65 · 2022-08-03T03:30:01Z

My project might face the same error. When I upgrade from 8.2.6 to 8.5.5. The typescript compiler (4.7.4) got into the infinite compilation.

himself65 · 2022-08-03T03:40:27Z

I think the error comes from in v8.3.0

vemoo · 2022-08-03T14:37:10Z

Minimal repro: https://codesandbox.io/s/react-table-repro-s2b796?file=/src/index.ts

It indeed started happening on 8.3.0

himself65 · 2022-08-03T18:40:36Z

I think the DeepKey is the reason

https://github.com/TanStack/table/pull/4185/files#diff-ecfb42689379fb8b0ebe6328e01b25aba4a31d2d076b723ff9fcaf502ac9d0f7R49

himself65 · 2022-08-04T21:41:03Z

This error occurs again in v8.5.8

/cc @tannerlinsley

himself65 · 2022-08-04T21:42:03Z

Example

import { ColumnDef, createColumnHelper } from '@tanstack/react-table'

type Room = {
  id: string
  activated_at: Date
  expires_at: Date
  userId: string
  join_code: string
  room: Room
}

const columnHelper = createColumnHelper<Room>()

const defaultColumns: ColumnDef<Room, any>[] = [
  columnHelper.accessor('id', {
    header: 'ID',
    cell: info => info.getValue()
  })
]

TS2589: Type instantiation is excessively deep and possibly infinite.

MagnesiumDev · 2022-08-28T20:10:42Z

@tannerlinsley I get this error, Im on v8.5.11

slouchymunchkin · 2022-08-31T13:29:03Z

I also get this error on v8.5.11.

I've tried using my own interface and the same interface in @himself65 example above.

himself65 · 2022-08-31T17:18:57Z

I also get this error on v8.5.11.

I've tried using my own interface and the same interface in @himself65 example above.

I think if you apply this patch, the issue will be fixed

#4262

Nirajn2311 · 2022-12-27T10:25:54Z

I'm still facing this issue in react-table:8.7.4

rotciw · 2022-12-28T14:42:38Z

Also facing the same issue in react-table:8.7.4

its-monotype · 2023-01-05T23:39:10Z

Me too, facing the same issue in react-table:8.7.4

mjlikre · 2023-02-08T19:23:12Z

Facing this issue in react-table:8.7.6, wonder if they're going to fix it ...

jrozbicki · 2023-02-09T07:16:39Z

I was surprised to see it happen in one of the projects only, but now I think it might be connected to typescript version: I had 4.1.6 fixed in project, bump to latest and error went away 🎉

const columns = [ch.accessor("currency", {})];
-----------------------^ When I checked (hovered over) this, with 4.1.6 I saw never

accessor: <"currency", never>(accessor: "currency", column: IdentifiedColumnDef<TransportLineItem, never>) => ColumnDef<TransportLineItem, never>

and now with 4.9.5

(property) accessor: <"currency", string>(accessor: "currency", column: IdentifiedColumnDef<TransportLineItem, string>) => ColumnDef<TransportLineItem, string>

Edit: I forgot to mention that I haven't really had exactly the same case as OP, my data interface don't have circular dependency inside like:

type Room = {
  id: string
  room: Room
}

its-monotype · 2023-02-09T10:17:37Z

import { createColumnHelper } from '@tanstack/react-table';

interface Dog {
  name: string;
  owner: Owner;
}

interface Owner {
  name: string;
  dog: Dog;
}

const columnHelper = createColumnHelper<Dog>();

const columns = [
  columnHelper.accessor('name', { // ts(2589): Type instantiation is excessively deep and possibly infinite.
    header: 'Name',
  }
]

https://codesandbox.io/s/tanstack-table-issues-4224-u92zmn?file=/src/App.tsx

Is it possible to fix it?

TS v4.9.3 in CodeSandbox and also I tried the same in VSCode with TS v4.9.5 and error still exists

aoneahsan · 2023-03-01T12:06:47Z

do we have a solution for this error???

using "@tanstack/react-table": "^8.7.9",

AllenElguira16 · 2023-03-07T08:21:00Z

I have an issue where if I put a type like FileList, it will cause the the ts(2589) issue

With FileList

string only

mosnicholas · 2023-03-23T21:03:16Z

I still see this error too on the latest typescript and react-table :( anyone have a good solution?

its-monotype · 2023-04-20T19:35:45Z

Any updates?

OkancanCosar · 2023-05-23T07:47:05Z

any updates?

uncvrd · 2023-05-24T22:26:16Z

Just wanted to report I sorta naively thought I could add a complex object in to the column helper and it straight up breaks TS across my entire project when I do so.

For example, I had a table I wanted to display Stripe Charges on. So I tried to do const helper = createColumnHelper<Stripe.Charge>(). And this causes VS Code to infinitely display the loading... prompt when hovering over an element on any file afterwards!

For now I am just creating temporary DTOs with the props that I actually need

connorlindsey · 2023-06-09T19:46:18Z

Also seeing this on 8.8.5 with the following (abbreviated) example. If I change ObjectId to be string, the ts error goes away so something to do with larger nested types maybe.

interface Patient {
    _id: ObjectId // from Mongoose
    ... other properties
}

const columnHelper = createColumnHelper<Patient>()
const columns = [
  columnHelper.accessor("name", {
    header: "Patient Info",
    cell: (info) => <span className="font-semibold text-gray-900">{info.getValue()}</span>,
  }),
]

akshay-nm · 2023-06-16T16:32:15Z

Simple objects are working fine. Recursive nested types break.

benzara-tahar · 2023-06-21T04:39:10Z

Having the same issue with 8.9.1

its-monotype · 2023-06-28T09:16:11Z

@tannerlinsley @KevinVandy Please help

yarinsa · 2023-10-05T17:02:35Z

Please help :)

himself65 mentioned this issue Aug 3, 2022

fix: type instantiation is excessively deep #4262

Merged

tannerlinsley closed this as completed in #4262 Aug 3, 2022

mogzol mentioned this issue Sep 16, 2022

Nested types cause TS "Type instantiation is excessively deep and possibly infinite." error on columnHelper accessor #4387

Open

2 tasks

its-monotype mentioned this issue May 12, 2023

Add example of data table using createColumnHelper from Tanstack Table shadcn-ui/ui#346

Open

fnocetti mentioned this issue Jul 28, 2023

Bump mongoose from 7.2.4 to 7.4.1 huridocs/uwazi#6054

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Getting type instantiation error #4224

Getting type instantiation error #4224

Slate245 commented Jul 26, 2022

tannerlinsley commented Jul 26, 2022 via email

spfoos commented Jul 26, 2022

tannerlinsley commented Jul 26, 2022

Slate245 commented Jul 27, 2022

dcworldwide commented Aug 1, 2022 •

edited

tannerlinsley commented Aug 2, 2022

himself65 commented Aug 3, 2022 •

edited

himself65 commented Aug 3, 2022

vemoo commented Aug 3, 2022

himself65 commented Aug 3, 2022

himself65 commented Aug 4, 2022 •

edited

himself65 commented Aug 4, 2022

MagnesiumDev commented Aug 28, 2022 •

edited

slouchymunchkin commented Aug 31, 2022

himself65 commented Aug 31, 2022

Nirajn2311 commented Dec 27, 2022

rotciw commented Dec 28, 2022

its-monotype commented Jan 5, 2023

mjlikre commented Feb 8, 2023

jrozbicki commented Feb 9, 2023 •

edited

its-monotype commented Feb 9, 2023 •

edited

aoneahsan commented Mar 1, 2023

AllenElguira16 commented Mar 7, 2023

mosnicholas commented Mar 23, 2023

its-monotype commented Apr 20, 2023

OkancanCosar commented May 23, 2023

uncvrd commented May 24, 2023

connorlindsey commented Jun 9, 2023

akshay-nm commented Jun 16, 2023

benzara-tahar commented Jun 21, 2023

its-monotype commented Jun 28, 2023

yarinsa commented Oct 5, 2023

Getting type instantiation error #4224

Getting type instantiation error #4224

Comments

Slate245 commented Jul 26, 2022

Describe the bug

Your minimal, reproducible example

Steps to reproduce

Expected behavior

How often does this bug happen?

Screenshots or Videos

Platform

react-table version

TypeScript version

Additional context

Terms & Code of Conduct

tannerlinsley commented Jul 26, 2022 via email

spfoos commented Jul 26, 2022

tannerlinsley commented Jul 26, 2022

Slate245 commented Jul 27, 2022

dcworldwide commented Aug 1, 2022 • edited

tannerlinsley commented Aug 2, 2022

himself65 commented Aug 3, 2022 • edited

himself65 commented Aug 3, 2022

vemoo commented Aug 3, 2022

himself65 commented Aug 3, 2022

himself65 commented Aug 4, 2022 • edited

himself65 commented Aug 4, 2022

MagnesiumDev commented Aug 28, 2022 • edited

slouchymunchkin commented Aug 31, 2022

himself65 commented Aug 31, 2022

Nirajn2311 commented Dec 27, 2022

rotciw commented Dec 28, 2022

its-monotype commented Jan 5, 2023

mjlikre commented Feb 8, 2023

jrozbicki commented Feb 9, 2023 • edited

its-monotype commented Feb 9, 2023 • edited

aoneahsan commented Mar 1, 2023

AllenElguira16 commented Mar 7, 2023

mosnicholas commented Mar 23, 2023

its-monotype commented Apr 20, 2023

OkancanCosar commented May 23, 2023

uncvrd commented May 24, 2023

connorlindsey commented Jun 9, 2023

akshay-nm commented Jun 16, 2023

benzara-tahar commented Jun 21, 2023

its-monotype commented Jun 28, 2023

yarinsa commented Oct 5, 2023

dcworldwide commented Aug 1, 2022 •

edited

himself65 commented Aug 3, 2022 •

edited

himself65 commented Aug 4, 2022 •

edited

MagnesiumDev commented Aug 28, 2022 •

edited

jrozbicki commented Feb 9, 2023 •

edited

its-monotype commented Feb 9, 2023 •

edited