Why can't find "defineComponents" in @json-render/react?

[hitris]

When i create components follow the "Quick Start" in a new Next.js project。I meet the error "defineComponents doesn't exist in @json-render/react". How can i fix it?

the build error like this:

## Error Type
Build Error

## Error Message
Export defineComponents doesn't exist in target module

## Build Output
./app/page.tsx:4:1
Export defineComponents doesn't exist in target module
  2 | import { schema } from "@json-render/react";
  3 | import { z } from "zod";
> 4 | import { defineComponents } from "@json-render/react";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 | import { Renderer } from "@json-render/react";
  6 |
  7 | const catalog = defineCatalog(schema, {

The export defineComponents was not found in module [project]/node_modules/.pnpm/@json-render+react@0.4.0_react@19.2.3_zod@4.3.6/node_modules/@json-render/react/dist/index.mjs [app-rsc] (ecmascript).
Did you mean to import Renderer?
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

Next.js version: 16.1.6 (Turbopack)

And my code like this:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react";
import { z } from "zod";
import { defineComponents } from "@json-render/react";
import { Renderer } from "@json-render/react";

const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({ title: z.string() }),
      description: "A card container",
    },
    Metric: {
      props: z.object({
        label: z.string(),
        value: z.string(),
        format: z.enum(["currency", "percent", "number"]).nullable(),
      }),
      description: "Display a metric value",
    },
    Button: {
      props: z.object({
        label: z.string(),
        action: z.string(),
      }),
      description: "Clickable button",
    },
  },
  actions: {
    export_report: { description: "Export dashboard to PDF" },
    refresh_data: { description: "Refresh all metrics" },
  },
});

const components = defineComponents(catalog, {
  Card: ({ props, children }) => (
    <div className="card">
      <h3>{props.title}</h3>
      {children}
    </div>
  ),
  Metric: ({ props }) => (
    <div className="metric">
      <span>{props.label}</span>
      <span>{format(props.value, props.format)}</span>
    </div>
  ),
  Button: ({ props, onAction }) => (
    <button onClick={() => onAction?.(props.action)}>{props.label}</button>
  ),
});

function Dashboard({ spec }) {
  return <Renderer spec={spec} catalog={catalog} components={components} />;
}

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
          <Dashboard />
        </div>
      </main>
    </div>
  );
}

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  },
  "dependencies": {
    "@json-render/core": "^0.4.0",
    "@json-render/react": "^0.4.0",
    "next": "16.1.6",
    "react": "19.2.3",
    "react-dom": "19.2.3",
    "zod": "^4.3.6"
  },
  "devDependencies": {
    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
    "tailwindcss": "^4",
    "typescript": "^5"
  }
}

[ctate]

Thanks for reporting this. Just fixed this in 0.4.2

The function is now called defineRegistry (not defineComponents). See the docs for updated usage.