使用react-bootstrap不起作用，不支持的服务器组件错误

Question

我的问题是，在将 React-bootstrap 与 TypeScript 一起使用时，我不断收到不支持的服务器组件错误。我已经向您提供了 page.tsx 文件、layout.tsx 文件的内容以及错误本身

layout.tsx 文件

import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import React from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'

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

export const metadata: Metadata = {
  title: "Let's Assist - Volunteering for everyone",
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className={inter.className}>{children}</div>
  )
}

page.tsx 文件

import React from 'react';
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import NavDropdown from 'react-bootstrap/NavDropdown';


export default function Home() {
  return (
    <div>
      <Navbar expand="lg" className="bg-body-tertiary">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#home">Home</Nav.Link>
            <Nav.Link href="#link">Link</Nav.Link>
            <NavDropdown title="Dropdown" id="basic-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>

      {/* Add your homepage content here */}
    </div>
  );
}

我的错误

❯ npm run dev

> [email protected] dev
> next dev

   ▲ Next.js 14.0.1
   - Local:        http://localhost:3000

 ✓ Ready in 2.7s
 ○ Compiling /page ...
 ✓ Compiled /page in 1679ms (782 modules)
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.

Check your code at page.tsx:13.
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.

Check your code at page.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.

Check your code at page.tsx:17.
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.

Check your code at page.tsx:18.
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.

Check your code at page.tsx:20.
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.

Check your code at page.tsx:21.
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.

Check your code at page.tsx:24.
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.

Check your code at page.tsx:25.
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.

Check your code at page.tsx:26.
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.

Check your code at page.tsx:15.
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)
digest: "723927334"
 ⨯ Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)

让我给你讲一些背景故事。我正在制作一个 next-js 应用程序，只是为了学习和使用，我决定使用默认模板（create-next-app 模板）并尝试 bootstrap 让我的生活变得更轻松。现在，这样做，引导程序的 css 部分工作了，但是 js 一直给出错误！所以，我忽略了它，并测试了其中一个功能，即导航栏中的下拉菜单，但它不起作用（我是一名新的网络开发人员，我做了更多后端工作）。我认为问题出在 javascript 上，经过一些谷歌搜索后，我似乎不得不使用名为 React-bootstrap 的东西。我尝试使用它，但出现此错误，并且我无法在任何地方找出原因。我已经上传了我的主页.tsx 文件，以及下面出现的错误。如果您知道我哪里出了问题以及我能做什么，那将会非常有帮助。谢谢！

Answer 1

Next.js 默认使用服务器端渲染（SSR），这意味着服务器在加载网页之前预渲染内容，并将结果直接发送到客户端浏览器。然而，Bootstrap 包含许多客户端 JavaScript 操作的组件，这些组件仅在客户端呈现时才起作用。在 Next.js 中，您可以在组件文件顶部写入

"use client"

来指定它应该由客户端渲染。

使用 App Router 的 Next.js 13 或更高版本，您可以通过以下方法绕过该问题。

保留现有的 Bootstrap css 导入。
```
import 'bootstrap/dist/css/bootstrap.min.css'
```
并从服务器渲染的文件中删除
```
react
```
和
```
react-bootstrap
```
框架的导入。
在
```
src/components/BootstrapClient.tsx
```
中创建一个新的客户端渲染组件文件，用于在网页加载后导入Bootstrap.js。

"use client"

import { useEffect } from 'react'

function BootstrapClient() {
  useEffect(() => {
    require('bootstrap/dist/js/bootstrap.bundle.min.js')
  }, [])

  return null
}

export default BootstrapClient

在您的
```
src/app/layout.tsx
```
文件中，导入并插入 BootstrapClient 组件。

import BootstrapClient from '@/components/BootstrapClient.tsx'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
        <BootstrapClient />
      </body>
    </html>
  )
}

将

react-bootstrap

中

bootstrap

 的用法更改为

src/app/page.tsx

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

注意：可能有一种方法可以让

react-bootstrap

使用客户端组件包装器，但我遇到了一些问题。

示例：

在

src/components/BootstrapClient.tsx

'use client'

export * in 'react-bootstrap'

在

layout.tsx

import { Container, Nav, Navbar, NavDropdown } from '@/components/BootstrapClient.tsx'

使用react-bootstrap不起作用，不支持的服务器组件错误

问题描述投票：0回答：1

1个回答

最新问题

使用react-bootstrap不起作用，不支持的服务器组件错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1