Giter Site home page Giter Site logo

Comments (4)

kyletsang avatar kyletsang commented on May 19, 2024

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

from react-bootstrap.

meiyingqishi avatar meiyingqishi commented on May 19, 2024

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:
Screenshot 2024-04-04 at 02 20 10

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:
Screenshot 2024-04-04 at 02 43 50

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 (
    <html lang=“en”>
      <body className={inter.className}>{children}</body>
    </html>
  );
}
  1. Open page.tsx and replace with the following code:
// 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>
  );
}
  1. Run by yarn dev in terminal and open http://localhost:3000 in the browser.

from react-bootstrap.

kyletsang avatar kyletsang commented on May 19, 2024

You're running into the issue described here: #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

from react-bootstrap.

meiyingqishi avatar meiyingqishi commented on May 19, 2024

Thank you for the response.

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

from react-bootstrap.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.