lukasbach
Broken with react compiler
Tested wlith AsyncLoaderState example in Next.js 16. Exact deps:
"dependencies": {
"@headless-tree/core": "^1.5.1",
"@headless-tree/react": "^1.5.1",
"@hookform/resolvers": "^5.2.2",
"@libsql/client": "^0.15.15",
"@orpc/client": "^1.10.1",
"@orpc/contract": "^1.10.1",
"@orpc/json-schema": "^1.10.1",
"@orpc/openapi": "^1.10.1",
"@orpc/openapi-client": "^1.10.1",
"@orpc/server": "^1.10.1",
"@orpc/tanstack-query": "^1.10.1",
"@orpc/zod": "^1.10.1",
"@space-man/react-theme-animation": "^1.1.1",
"@tanstack/react-form": "^1.23.8",
"@tanstack/react-query": "^5.90.5",
"better-auth": "1.3.27",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"date-fns": "^4.1.0",
"drizzle-orm": "^0.44.7",
"drizzle-zod": "^0.8.3",
"embla-carousel-react": "^8.6.0",
"input-otp": "^1.4.2",
"lucide-react": "^0.544.0",
"motion": "^12.23.24",
"next": "16.0.0",
"next-themes": "^0.4.6",
"radix-ui": "latest",
"react": "19.2.0",
"react-day-picker": "^9.11.1",
"react-dom": "19.2.0",
"react-hook-form": "^7.65.0",
"react-resizable-panels": "^2.1.9",
"recharts": "^2.15.4",
"sonner": "^1.7.4",
"tailwind-merge": "^3.3.1",
"vaul": "^1.1.2",
"zod": "^4.1.12"
},
"devDependencies": {
"@prettier/plugin-oxc": "^0.0.4",
"@tailwindcss/postcss": "^4.1.16",
"@testing-library/dom": "^10.4.1",
"@testing-library/react": "^16.3.0",
"@types/node": "^22.18.12",
"@types/react": "19.2.2",
"@types/react-dom": "19.2.2",
"@vitejs/plugin-react": "^5.1.0",
"babel-plugin-react-compiler": "1.0.0",
"drizzle-kit": "^0.31.5",
"jsdom": "^27.0.1",
"lefthook": "^1.13.6",
"oxlint": "^1.24.0",
"postcss": "^8.5.6",
"prettier": "^3.6.2",
"tailwindcss": "^4.1.16",
"tw-animate-css": "^1.4.0",
"typescript": "^5.9.3",
"vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4"
},
"pnpm": {
"overrides": {
"@types/react": "19.2.2",
"@types/react-dom": "19.2.2"
},
"onlyBuiltDependencies": [
"@tailwindcss/oxide",
"esbuild",
"lefthook",
"sharp"
]
}
}
next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
experimental: {
browserDebugInfoInTerminal: true,
typedEnv: true,
useLightningcss: true
},
reactCompiler: true,
typedRoutes: true,
images: {
unoptimized: true // FIXME
}
}
module.exports = nextConfig
What is the error you are getting, and the code of your HT integration? Can you provide a minimal repro of the issue, perhaps with one of the HT samples? For me it seems to work fine in a basic NextJS+Compiler Setup: https://stackblitz.com/edit/github-vhuzkndv?file=next.config.ts
You need nextjs 16 and possibly turbopack, see my dependencies json. I can't install it into stackblitz. As i said i used React/Async/Async Loading State example
Same issue for me. Tree doesn't render at all for me when reactCompiler is enabled. There is no error, just when I log the treeInstance.getItems() i get an empty array. After disabling reactCompiler everything works well.
{
"name": "foto",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --port=3001",
"build": "next build",
"start": "next start",
"lint": "biome lint .",
"format": "biome check --write .",
"check-types": "tsc --noEmit"
},
"dependencies": {
"@headless-tree/core": "^1.5.1",
"@headless-tree/react": "^1.5.1",
"@maspex/api-client": "workspace:*",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-collapsible": "^1.1.12",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-scroll-area": "^1.2.10",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-tooltip": "^1.2.8",
"babel-plugin-react-compiler": "^1.0.0",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"embla-carousel-react": "^8.6.0",
"lodash": "^4.17.21",
"lucide-react": "^0.552.0",
"next": "16.0.0",
"next-intl": "^4.4.0",
"nuqs": "^2.7.2",
"react": "19.2.0",
"react-dom": "19.2.0",
"react-fast-marquee": "^1.6.5",
"react-medium-image-zoom": "^5.4.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1",
"vaul": "^1.1.2",
"zod": "^4.1.12",
"zustand": "^5.0.8"
},
"devDependencies": {
"@tailwindcss/postcss": "^4.1.16",
"@types/lodash": "^4.17.20",
"@types/node": "^24",
"@types/react": "19.2.2",
"@types/react-dom": "19.2.2",
"tailwindcss": "^4.1.16",
"tw-animate-css": "^1.4.0",
"typescript": "^5"
}
}
import type { NextConfig } from "next";
import createNextIntlPlugin from "next-intl/plugin";
const nextConfig: NextConfig = {
// cacheComponents: true,
reactCompiler: true,
images: {
unoptimized: true, // TODO: remove this later
remotePatterns: [{ protocol: "https", hostname: "placehold.co" }],
},
};
const withNextIntl = createNextIntlPlugin({
experimental: {
createMessagesDeclaration: "./messages/en.json",
},
requestConfig: "./src/i18n/request.ts",
});
export default withNextIntl(nextConfig);
@lukasbach Also with vite react + react compiler it's broken (items don't render at all, if you use HMR it does)
Thanks for the details. I'm unfortunately on a trip for some time, and won't be able to investigate this deeper until early December. I'll have a look at this then.