Broken with react compiler

[qweered]

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

[lukasbach]

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

[qweered]

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

[jaqubowsky]

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);

[Emiliano-Bucci]

@lukasbach Also with vite react + react compiler it's broken (items don't render at all, if you use HMR it does)