Bug: Card.Body and Card.Title throw "Error: Unsupported Server Component type: undefined" in Next.js

[maximilian-schwaerzler]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

I am trying to use the Card Component of react-bootstrap as it is intended in the docs. Here is my React component:

TourSelector.tsx

"use server";
import {getTours} from "@/utils/data";
import Card from "react-bootstrap/Card";
// import CardBody from "react-bootstrap/CardBody";
// import CardTitle from "react-bootstrap/CardTitle";

export default async function TourSelector() {
    const tours = await getTours();
    return (
        <div className="d-flex gap-2">
            {tours.map((tour) =>
                <Card key={tour.id} style={{width: "18rem"}}>
                    <Card.Body>
                        <Card.Title>{tour.name}</Card.Title>
                    </Card.Body>
                </Card>
            )}
        </div>
    )
}

However, on the site where this is used I get the Next.js error of Error: Unsupported Server Component type: undefined and the cmd output on the dev server says

Check your code at TourSelector.tsx:14.
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

When I don't use Card.Body and Card.Title (so only Card) it works fine.

What am I doing wrong?

Expected behavior

No response

To Reproduce

1. Use this server component in your app on Next.js (App Router)
2. Provide data (in my case just some sample async data with a delay, mimicking a local DB)
3. Run

Reproducible Example

Only tested on Next.js

Screenshots

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

2.9.1

What version of Bootstrap are you using?

5.3.2

Additional context

No response

[shashi2290]

@magical-obama it is requested not to default export named functions with inline method

instead of export default async function TourSelector() { const tours = await getTours(); return ( <div className="d-flex gap-2"> {tours.map((tour) => <Card key={tour.id} style={{width: "18rem"}}> <Card.Body> <Card.Title>{tour.name}</Card.Title> </Card.Body> </Card> )} </div> ) }
use async function TourSelector() { const tours = await getTours(); return ( <div className="d-flex gap-2"> {tours.map((tour) => <Card key={tour.id} style={{width: "18rem"}}> <Card.Body> <Card.Title>{tour.name}</Card.Title> </Card.Body> </Card> )} </div> ) } export default TourSelector;

[kyletsang]

This is a known issue with RSC. See #6669