Minified React Error #418 with custom column definition in DataTable

[jsdev-robin]

NOTE: The error show on vercel production mode

TanStack Table version

V8

Framework/Library version

React.js 19
Next.js 15

Describe the bug and the steps to reproduce it

When defining column definitions manually (without columnHelper) inside React.useMemo, the component throws a Minified React error #418 at runtime.

However, if we switch to using columnHelper.accessor(...) for the same columns, the error goes away. This issue appears to happen when integrating with useReactTable() and rendering via a custom grid component.

Example Link: https://tanstack.com/table/latest/docs/framework/react/examples/column-dnd

"use client";

import React from "react";
import { useReactTable, ColumnDef } from "@tanstack/react-table";
import { dummyPeople, Person } from "@/data/dummyPeople";

const Example = () => {
  const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: "firstName",
        cell: (info) => info.getValue(),
      },
      {
        accessorKey: "lastName",
        cell: (info) => info.getValue(),
      },
    ],
    []
  );

  const [data] = React.useState(dummyPeople);

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: () => ({}), // minimal config
  });

  return <div>Render table here</div>;
};

export default Example;

Steps to Reproduce:

1. Use ColumnDef[] typed columns with useMemo.

2. Pass them to useReactTable.

3. Render the table (or a component that uses table.getHeaderGroups(), etc).

4. https://react.dev/errors/418

Expected behavior: The table should render normally, as columnHelper is syntactic sugar. Manual column definitions should not cause a React hook error.

Actual behavior: Throws React error:
Minified React error #418 – likely caused by hooks being called conditionally or improperly.

Environment:

@tanstack/react-table: v8.x

React: 19
Next.js 15

Next.js: App Router with "use client" enabled

Custom table component: used to render table instance passed from useReactTable()

Notes:

Switching to columnHelper.accessor(...) resolves the issue.

This seems related to column-level rendering, not useReactTable itself.

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://tanstack.com/table/latest/docs/framework/react/examples/column-dnd

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

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.