Type error: 'Card' cannot be used as a JSX component.

[la-ruee-vers-le-bois]

Hi,

I'am trying to build my project with pnmp and turborepo but the following error appears:

portal:build: Type error: 'Card' cannot be used as a JSX component.
--
09:11:11.801 | portal:build:   Its type 'ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>' is not a valid JSX element type.
09:11:11.801 | portal:build:     Type 'ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
09:11:11.802 | portal:build:       Type 'ReactElement<any, string \| JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
09:11:11.802 | portal:build:
09:11:11.802 | portal:build:   51 \|     <MaxWidthWrapper>
09:11:11.802 | portal:build:   52 \|       <div className='animate-in flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground'>
09:11:11.802 | portal:build: > 53 \|         <Card className='animate-in flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground'>
09:11:11.802 | portal:build:      \|          ^
09:11:11.802 | portal:build:   54 \|           <p className='text-primary'>Hey, {user.email}!</p>
09:11:11.802 | portal:build:   55 \|           {isOwner ? (
09:11:11.802 | portal:build:   56 \|             <p className='text-primary'>Owner !!!!</p>
09:11:11.877 | portal:build:  ELIFECYCLE  Command failed with exit code 1.
09:11:11.897 | portal:build: ERROR: command finished with error: command (/vercel/path0/apps/portal) pnpm run build exited (1)
09:11:11.897 | portal#build: command (/vercel/path0/apps/portal) pnpm run build exited (1)
09:11:11.897 |  
09:11:11.897 | Tasks:    0 successful, 1 total
09:11:11.898 | Cached:    0 cached, 1 total
09:11:11.898 | Time:    24.379s
09:11:11.898 | Summary:    /vercel/path0/.turbo/runs/2SuwbpPe0i3BVfzN9UyW5XUcZUX.json
09:11:11.898 | Failed:    portal#build
09:11:11.898 |  
09:11:11.898 | ERROR  run failed: command  exited (1)
09:11:11.912 | Error: Command "cd ../.. && turbo run build --filter={apps/portal}..." exited with 1

The code where the error appears:

[...]
return (
    <MaxWidthWrapper>
      <div className='animate-in flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground'>
        <Card className='animate-in flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground'>
          <p className='text-primary'>Hey, {user.email}!</p>
          {isOwner ? (
            <p className='text-primary'>Owner !!!!</p>
          ) : (
            <p className='text-primary'>Pas owner</p>
          )}
        </Card>
      </div>
    </MaxWidthWrapper>
  );
[...]

My versions:

{
  "name": "shared",
  "version": "0.0.0",
  "main": "./index.tsx",
  "types": "./index.tsx",
  "license": "MIT",
  "scripts": {
    "lint": "eslint \"**/*.ts*\"",
    "ui:add": "pnpm dlx shadcn-ui@latest add"
  },
  "devDependencies": {
    "@types/react": "^18.2.0",
    "@types/react-dom": "^18.2.0",
    "autoprefixer": "^10.4.14",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "postcss": "^8.4.24",
    "react": "^18.2.0",
    "tailwindcss": "^3.3.2",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-alert-dialog": "^1.0.4",
    "@radix-ui/react-aspect-ratio": "^1.0.3",
    "@radix-ui/react-avatar": "^1.0.3",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-context-menu": "^2.1.4",
    "@radix-ui/react-dialog": "^1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-hover-card": "^1.0.6",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-menubar": "^1.0.3",
    "@radix-ui/react-navigation-menu": "^1.1.3",
    "@radix-ui/react-popover": "^1.0.6",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-radio-group": "^1.1.3",
    "@radix-ui/react-scroll-area": "^1.0.4",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slider": "^1.1.2",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tabs": "^1.0.4",
    "@radix-ui/react-toast": "^1.1.4",
    "@radix-ui/react-toggle": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.6",
    "class-variance-authority": "^0.6.0",
    "clsx": "^1.2.1",
    "lucide-react": "^0.244.0",
    "next": "^13.4.12",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^1.13.2",
    "tailwindcss-animate": "^1.0.6"
  }
}

Thx for your help

[xn1cklas]

The Card component can only have these children: CardContent, CardDescription, CardFooter, CardHeader, CardTitle.

You want to paste your

in one of them like:

 <Card className='animate-in flex flex-col gap-14 max-w-4xl px-3 py-16 lg:py-24 text-foreground'>
     <CardContent>
          <p className='text-primary'>Hey, {user.email}!</p>
          {isOwner ? (
            <p className='text-primary'>Owner !!!!</p>
          ) : (
            <p className='text-primary'>Pas owner</p>
          )}
         </CardContent>
</Card>

For further information, check the example in the docs

[nelsonfrank]

I faced the same issue, But it found a solution which is to delete all node_module and package-lock.json in case of npm or pmpm-lock.yaml in case of pnpm and install dependencies again by either pnpm install or npm install in root directory of the project. Then the problem solved. Do the same if you use yarn by delete the yarn.lock file.

Refer here

#1978#issuecomment-1873574838

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.