table: Getting type instantiation error

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.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 8
  • Comments: 32 (7 by maintainers)

Most upvoted comments

Any updates?

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

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

TS2589: Type instantiation is excessively deep and possibly infinite.

It’s on columnHelper.accessor

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

Having the same issue with 8.9.1 image

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

Please help 😃

Simple objects are working fine. Recursive nested types break.

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

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

It indeed started happening on 8.3.0

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 😕.