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

[mogzol]

Describe the bug

Trying to create a column definition through createColumnHelper with nested, repeated types causes the typescript error "Type instantiation is excessively deep and possibly infinite."

Your minimal, reproducible example

https://codesandbox.io/s/tanstack-table-nested-column-issue-j912po

Steps to reproduce

1. Create a new typescript file with these contents:

import { createColumnHelper } from "@tanstack/table-core";

interface Data {
  name: string;
  nested: Data;
}

const columnHelper = createColumnHelper<Data>();
columnHelper.accessor("name", {});

2. Observe the typescript error on the last line.

Expected behavior

There should not be a typescript error

How often does this bug happen?

No response

Screenshots or Videos

No response

Platform

• macOS 12.5.1, node 16

react-table version

8.5.13

TypeScript version

4.8.3

Additional context

Weirdly this doesn't happen when creating a column definition directly, this works fine without errors:

const column: ColumnDef<Data> = {
  id: "name",
  accessorKey: "name",
};

It's just when trying to use createColumnHelper that errors occur.

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[mogzol]

Just noticed that #4224 is likely the same issue, however it has been marked as fixed and closed, but this is still happening on the latest TanStack table version.

[apperside]

Still happenning, just tried with [email protected] version

[terry-au]

Still happenning, just tried with [email protected] version

If you have some spare time, would you consider pulling down this PR, building and linking. That PR eliminates a duplicated call to a potentially expensive recursive type, as well as enabling type caching wherever possible.

[lrstanley]

@terry-au I had the same use case and issue as described by @mogzol, a recursive type that causes the excessively deep error, and tested your PR (built and linked) -- no success, same issue.

For now, I'm using Pick<OriginalType, "field1" | "field2" | "etc">, which does get around these issues (as I'm excluding the fields that may be recursive), though not the most ideal.

[SRotendahl]

This also happens if you use something like HTMLElement or ReactNode. I'm new to TanStack, and I can't seem to get anything working besides string, number and LocalDate, otherwise I get the excessively deep error.

[lrstanley]

This also happens if you use something like HTMLElement or ReactNode. I'm new to TanStack, and I can't seem to get anything working besides string, number and LocalDate, otherwise I get the excessively deep error.

Have you tried using ColumnDef<YourType> directly, rather than using the column-helper methods/functions? As I don't believe this would occur under that scenario (or if it does, should be much less likely).

[khnn]

We also get "Type instantiation is excessively deep and possibly infinite." for createColumnHelper on our github actions after upgrading to typescript 4.8.4 with tanstack/[email protected]. Using ColumnDef works for us though.

[SRotendahl]

That seems to work, I had tried using ColumnDef before but I had defined it incorrectly, it seems to work now. Thank you :)

[terry-au]

@terry-au I had the same use case and issue as described by @mogzol, a recursive type that causes the excessively deep error, and tested your PR (built and linked) -- no success, same issue.

For now, I'm using Pick<OriginalType, "field1" | "field2" | "etc">, which does get around these issues (as I'm excluding the fields that may be recursive), though not the most ideal.

@lrstanley @SRotendahl I have fixed this issue and updated my PR. Column helper should now only do the bare minimum of recursion needed to infer a type at a given path.

[its-monotype]

How to fix that? Still facing the same issue in react-table:8.7.4

[unifam123]

How to fix that? Still facing the same issue in react-table:8.7.4

You can place // @ts-ignore above columnHelper. But better not to use columnHelper

Instead, you can define columns as in the example below. https://tanstack.com/table/v8/docs/examples/react/column-sizing

const defaultColumns: ColumnDef<Person>[] = [
  {
    header: 'Name',
    footer: props => props.column.id,
    columns: [
      {
        accessorKey: 'firstName',
        cell: info => info.getValue(),
        footer: props => props.column.id,
      },
      {
        accessorFn: row => row.lastName,
        id: 'lastName',
        cell: info => info.getValue(),
        header: () => <span>Last Name</span>,
        footer: props => props.column.id,
      },
    ],
  }
]

[breadadams]

Running into this issue on a project with latest version (8.9.3).

Edit: My repro is basically the same as the one in description 😅

Not sure if one has already been shared, but here's a very simple repro of the problem based on the following code:

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

interface Person {
  name: string;
  age: number;
  parent: Person;
}

const columnHelper = createColumnHelper<Person>();

export const columns = [columnHelper.accessor("name")];

[KevinVandy]

I just use an accessorFn instead of accessorKey when that happens. Recently, mongoose _id Object id types cause the issue for me

[oren-legit]

I have the exact same problem and it messes up intellisense for my whole project...

I don't want to use ColumnDef - while it does work, it's not as type safe as columnHelper which is why I used it in the first place. For example, using ColumnDef and defining a cell function, the value from getValue is not typed

[sohhamm]

This is still happening for me, when I use columnHelper, it messes up the whole intellisense of vscode

[yarinsa]

Any ideas on ovverride?