New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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:
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: