Suggest adding 'use client’ for all the react-bootstrap component #6792
Comments
|
|
|
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: 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:
// 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 (
<html lang=“en”>
<body className={inter.className}>{children}</body>
</html>
);
}
// 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>
);
}
|
|
You're running into the issue described here: #6669 Unfortunately you won't be able to use the dot notation for components ( |
|
Thank you for the response. Alright, although the temporary solution is not perfect, it still resolves the issue. |
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.
The text was updated successfully, but these errors were encountered: