Canvas not working within Editor

[parv141206]

I am trying to build a minimal website builder to explore craftjs, however, i am getting this error

Invariant failed: The component type specified for this node (ke) does not exist in the resolver

Heres one of the components, a simple card:

"use client";

import { useNode, Canvas } from "@craftjs/core";
import { Text } from "./Text";
import { Button } from "./Button";
import { RefCallback } from "react";

type CardProps = {
  background?: string;
  padding?: number;
};

export const Card = ({ background, padding = 20 }: CardProps) => {
  const {
    connectors: { connect, drag },
  } = useNode();

  const ref: RefCallback<HTMLDivElement> = (dom) => {
    if (dom) connect(drag(dom));
  };

  return (
    <div
      ref={ref}
      style={{
        background,
        padding: `${padding}px`,
      }}
      className="rounded-lg shadow-md"
    >
      <Canvas id="card-canvas">
        <Text text="Title" fontSize="20px" />
        <Text text="Subtitle" fontSize="15px" />
        <Button text="Click me" />
      </Canvas>
    </div>
  );
};

Card.craft = {
  props: {
    background: "#ffffff",
    padding: 20,
  },
  displayName: "Card",
  canvas: true,
  rules: {
    canMoveIn: () => true,
  },
};

Heres how i am calling it inside a sample default canvas which will be shown to the user

"use client";

import { Frame, Element } from "@craftjs/core";
import { Text } from "./UserComponents/Atomic/Text";
import { Card } from "./UserComponents/Atomic/Card";

export const CustomCanvas = () => {
  return (
    <div className="flex-1 h-full">
      <Frame key={"custom-canvas-frame"}>
        <Element is="div" canvas id="ROOT" className="p-4 bg-white min-h-full">
          <Text text="Welcome to your new page" fontSize="28px" />
          <Text
            text="Drag components from the left to get started."
            fontSize="16px"
          />
          <Card />
        </Element>
      </Frame>
    </div>
  );
};

whole called in a page.tsx:

"use client";

import { Canvas, Editor } from "@craftjs/core";
import { ComponentToolbox } from "@/components/builder/ComponentToolbox";
import { SettingsPanel } from "@/components/builder/SettingsPanel";
import { Topbar } from "@/components/builder/Topbar";
import { CustomCanvas } from "@/components/builder/CustomCanvas";

// Import ALL your user components
import { Text } from "@/components/builder/UserComponents/Atomic/Text";
import { Button } from "@/components/builder/UserComponents/Atomic/Button";
import { Card } from "@/components/builder/UserComponents/Atomic/Card";
import {
  TwoColumnSection,
  TwoColumnSectionContainer,
} from "@/components/builder/UserComponents/Sections/TwoColumnSection";

export default function Builder() {
  console.log({
    name: Card.name,
    craft: Card.craft,
  });
  if (typeof TwoColumnSection === "function") {
    console.log("✅ TwoColumnSection is a valid component");
  }
  console.log("Card in resolver:", Card);
  console.log("Card displayName:", Card?.craft?.displayName);
  return (
    <Editor
      resolver={{
        Text,
        Button,
        Card,
        TwoColumnSection,
        TwoColumnSectionContainer,
        CustomCanvas,
      }}
    >
      <div className="flex flex-col h-screen">
        <Topbar />
        <div className="flex flex-1">
          <div className="w-1/4 border-r overflow-auto">
            <ComponentToolbox />
          </div>
          <div className="flex-1">
            <CustomCanvas />
          </div>
          <div className="w-1/4 border-l overflow-auto">
            <SettingsPanel />
          </div>
        </div>
      </div>
    </Editor>
  );
}