Suggest adding 'use client’ for all the react-bootstrap component

[meiyingqishi]

Next.js defaults to server-side rendering, but the components provided by react-bootstrap are client-side components. Using them in a Next.js app will result in errors. We suggest adding the 'use client' header to each react-bootstrap component so that react-bootstrap components can function correctly in Next.js.

[kyletsang]

use client is already inserted by our babel plugin during the build. Are you running into issues with the latest version of react-bootstrap?

[meiyingqishi]

Hi there, @kyletsang , thank you for your response. May I ask which version you are referring to?

I am currently testing with the latest version v2.10.2:

"dependencies": {
    "bootstrap": "^5.3.3",
    "next": "14.2.0-canary.52",
    "react": "^18",
    "react-bootstrap": "^2.10.2",
    "react-dom": "^18",
    "sass": "^1.72.0"
  }

The issue persists as before and has not been resolved:

Console output:

digest: "4184040309"
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
    at stringify (<anonymous>)
digest: "4184040309"

Browser display:

Developers need to manually add 'use client' to the page.

After manually adding 'use client' to page.tsx, the execution runs smoothly. The expected display looks like this:

Below are the reproduction steps: I'm using the react-bootstrap framework for development testing.

1. yarn create react-bs-demo;
2. cd react-bs-demo;
3. yarn add react-bootstrap bootstrap sass;
4. code .;
5. Open layout.tsx, remove import "./globals.css”; and append import "bootstrap/dist/css/bootstrap.min.css”;

   
   // layout.tsx

import type { Metadata } from “next”; import { Inter } from "next/font/google”;

import "bootstrap/dist/css/bootstrap.min.css”;

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = { title: "Create Next App”, description: "Generated by create next app”, };

export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children}

); }

6. Open **page.tsx** and replace with the following code:
```typescript
// page.tsx

import { Button, ButtonGroup, Dropdown } from "react-bootstrap”;

export default function Home() {
  return (
    <main className="p-5”>
      <Dropdown as={ButtonGroup}>
        <Dropdown.Toggle>Hello Button</Dropdown.Toggle>
        <Dropdown.Menu className="super-colors”>
          <Dropdown.Item>Action</Dropdown.Item>
          <Dropdown.Item>Another Action</Dropdown.Item>
          <Dropdown.Item active>Active Action</Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item>Separated Action</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown><hr />

      <Dropdown as={ButtonGroup}>
        <Button variant='info'>mix it up style-wise</Button>
        <Dropdown.Toggle split variant="success” />
        <Dropdown.Menu className="super-colors”>
          <Dropdown.Item eventKey="1">Action</Dropdown.Item>
          <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
          <Dropdown.Item eventKey="3” active>
            Active Item
          </Dropdown.Item>
          <Dropdown.Divider />
          <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown><hr />

    </main>
  );
}

7. Run by yarn dev in terminal and open http://localhost:3000 in the browser.

[kyletsang]

You're running into the issue described here: https://github.com/react-bootstrap/react-bootstrap/issues/6669

Unfortunately you won't be able to use the dot notation for components (Dropdown.Item for example). You'll have to import DropdownItem and use that instead

[meiyingqishi]

Thank you for the response.

Alright, although the temporary solution is not perfect, it still resolves the issue.