Skip to content

1.5.0 causes unrecognized asChild prop on DOM error #56

Description

@gavan-x
// import React from "react";
// import { cn } from "@/lib/utils";

// export const BaseNode = React.forwardRef<
//   HTMLDivElement,
//   React.HTMLAttributes<HTMLDivElement> & { selected?: boolean }
// >(({ className, selected, ...props }, ref) => (
//   <div ref={ref} className={cn(
//       "relative rounded-md border bg-card p-5 text-card-foreground",
//       className,
//       selected ? "border-green-400 shadow-lg":"",
//      "pointer-cursor relative rounded-lg border bg-card p-5 text-card-foreground",
//      "hover:ring-1 ring-pink-500/100 transition-all hover:duration-100 duration-600 ease-in-out ease-exponential",
//      "tabIndex: 0",
//     )}
//     tabIndex={0}
//     {...props}
//   ></div>
// ));
// // BaseNode.displayName = "BaseNode";

import { twc,TwcComponentProps } from "react-twc"
import { twx } from "@/lib/utils"

type BaseNodeProps = TwcComponentProps<"div"> & { $selected?: boolean }


export const BaseNode = twx.div<BaseNodeProps>((props) => [
  props.$selected ? "border-green-400 shadow-lg":"",
  "pointer-cursor relative rounded-lg border bg-card p-5 text-card-foreground",
  "hover:ring-1 ring-pink-500/100 transition-all hover:duration-100 duration-600 ease-in-out ease-exponential",
  "tabIndex: 0",
]);
 
BaseNode.displayName = "BaseNode"

added the full file so you can see the cleaner implementation twc gives.
I had to downgrade back to 1.4.2.....
AI couldn't fix this problem.

console error:

"React does not recognize the %s prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase %s instead. If you accidentally passed it from a parent component, remove it from the DOM element. asChild aschild"

utils.ts

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
import { createTwc } from "react-twc"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

export const twx = createTwc({ compose: cn })

appreciate your help on this so I can upgrade to 1.5.0!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions