[Vue warn]: Invalid VNode type: Symbol(react.fragment) (symbol)

[nguyenthanhan201]

TanStack Table version

"@tanstack/vue-table": "^8.15.3", "@tanstack/table-core": "^8.15.3"

Framework/Library version

"vue": "^3.4.21", "react": "18.2.0", "react-dom": "18.2.0"

Describe the bug and the steps to reproduce it

I use micro front-end: Nextjs(host), Vuejs(remote-module)

My custom cell not render any thing but default cell can render nomal. Below image show what remote-table rendered.

My host

const Page = () => {
  const ref = useRef(null);

  const temp: ColumnDef<Product, any>[] = [
    columnHelper.accessor('title', {
      cell: (info) => info.getValue(),
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('price', {
      cell: (info) => info.getValue(),
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('slug', {
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('categorySlug', {
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('description', {
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('size', {
      footer: (props) => props.column.id
    }),
    columnHelper.accessor('colors', {
      footer: (props) => props.column.id,
      cell: (info) => {
        return <>{info.getValue()}</>;
      }
    })
  ];

  useEffect(() => {
    mount(ref.current, {
      defaultData: products,
      columns: temp,
    } as TableComponentProps<Product>);
  });

  return <div ref={ref} />;
};

My remote

const table = useVueTable({
  get data() {
    return data.value;
  },
  columns: props.columns,
  getCoreRowModel: getCoreRowModel()
});

<table style="width: 100%">
      <thead>
        <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
          <th v-for="header in headerGroup.headers" :key="header.id" :colSpan="header.colSpan">
            <FlexRender
              v-if="!header.isPlaceholder"
              :render="header.column.columnDef.header"
              :props="header.getContext()"
            />
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in table.getRowModel().rows" :key="row.id">
          <td v-for="cell in row.getVisibleCells()" :key="cell.id">
            <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
          </td>
        </tr>
      </tbody>
    </table>

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://codesandbox.io/p/github/nguyenthanhan201/demo/main?file=%2Fapps%2Fapp-shell%2Fpages%2Fadmin%2Fproducts%2Findex.tsx%3A24%2C3&import=true&workspaceId=5dcf0721-5cb1-446b-94ad-b9f95d81d8ad

Screenshots or Videos (Optional)

No response

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

No, because I do not know how

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.