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

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

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", {});

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

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.

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 7
Comments: 16 (3 by maintainers)

Most upvoted comments

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,
      },
    ],
  }
]

unifam123 on Mar 18, 2023

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

oren-legit on Jul 23, 2023

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

its-monotype on Jan 5, 2023

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

SRotendahl on Oct 13, 2022

@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 on Oct 10, 2022

Still happenning, just tried with react-table@8.5.15 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.

terry-au on Oct 4, 2022

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.

mogzol on Sep 16, 2022