[bug]: Does not work with React Compiler enabled

[yudielcurbelo]

Describe the bug

None of the components work when the React Compiler is enabled.

How to reproduce

1. set reactCompiler to true in the next.config.ts and run

Link to reproduction

none

Additional information

No response

[adman44532]

I also ran into this bug, and found the following issues while using the example code from The Docs:

• Text-based searches do not update in the UI, and only "partially" update the URL state (e.g. typing "beta" results in only "a").
• Status-based searches only update once the command area is closed, but the data still does not refresh.
• Providing data from something like React Query does not update the table.

Setting the reactCompiler option to false, then deleting the .next folder, seems to have resolved these issues.

Another thing that seems to work to fix it while having reactCompiler to true is using "use no memo";[1] across the files.

How to reproduce

1. Follow the installation steps from the documentation, using the shadcn cli.
2. Copy the example from the doc into a new page.tsx file.
3. Set reactCompiler to true in the next.config.ts
4. Run the project

[TommiL90]

You need to add the use no memo directive so that TanStack’s features start working again. https://github.com/TommiL90/web-consulting-lenses