Type error: Page "..." does not match the required types of a Next.js Page!

[hazy herald]

So,
I am getting this error when bulding the app:

Type error: Page "src/app/detailed_view/page.tsx" does not match the required types of a Next.js Page.
  "CardDemo" is not a valid Page export field.

Snippet:

type CardProps = React.ComponentProps<typeof Card>

export default function CardDemo({ className, ...props }: CardProps) {
  const searchparams = useSearchParams()
  const name = searchparams.get('name')

[glass shoal]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[hazy herald]

bump

[shadow thicket]

you can't export CardDemo with that props type

how will you get Card types props in page.tsx?

[hazy herald]

thxx!!

[shadow thicket]

no worries, it was simple problem

it's solved I assume?

[hazy herald]

yeah

[shadow thicket]

noice, could you mark the message that helped you as solution?

[glass shoal]

✅ Success!

This question has been marked as answered! If you have any other questions, feel free to create another post

Jump to answer

[Click here](#1216849389931204710 message)

[shadow thicket]

🫡

[hazy herald]

Also...

It is offtopic from the main reason, but how can i use router in cell function ?

...
export const columns: ColumnDef<Payment>[] = [
  {
    accessorKey: "version",
    header: "Package version",
  },
  {
    accessorKey: "desc",
    header: "Update notes",
  },
  {
    id: "actions",
    header: "Actions",
    cell: ({ row }) => {
      const paket = row.original
      const router = useRouter();
      const handleCopyPackagaName = (dependency) => {
        navigator.clipboard.writeText(dependency)
          .then(() => {
            toast.success("Copied package name!")
          })
          .catch(error => {
            toast.error("Failed to copy the package name...")
          });
      }
...

[shadow thicket]

create a new component/function for the actions component ig?

[hazy herald]

??

i'm very fresh in ts

[shadow thicket]

you can create a new <Actions /> component

[shadow thicket]

and in cell function,

return (
<Actions paket={paket} />
)

[hazy herald]

hmm, okay

[shadow thicket]

yes, you need a component to use hooks, like I said create a new component

[hazy herald]

i would try

[shadow thicket]

sure, ask here if you have any problems

[hazy herald]

?

[shadow thicket]

can you share your file, and please create new #1007476603422527558 post. since this is a new discussions.