引入Bootstrap Carousel组件导致React页面空白问题求助

Header和Footer组件可正常工作，开发包含Bootstrap Carousel组件的Slider组件后，将其放置到App.js的Header与Footer之间，页面变为空白；移除Slider内的Carousel，替换为Container和Box组件后，页面可正常显示Header、Box和Footer。

Slider组件代码 #

import React from "react";
import { Container,Box } from "@mui/material";
import Carousel from 'react-bootstrap/Carousel';

function Slider() {
    return (
        <div>
            <Container sx={{  float: "left",}}>
                <Box sx={{ width: 300, height: 300, backgroundColor: 'blue', '&:hover': { width: 500, height: 500, backgroundColor: 'primary.secondry', opacity: [0.9, 0.8, 0.7],},}} />
            </Container>
            <Carousel>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=First slide&bg=373940"
                    alt="First slide"
                    />
                    <Carousel.Caption>
                    <h3>First slide label</h3>
                    <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=Second slide&bg=282c34"
                    alt="Second slide"
                    />
                    <Carousel.Caption>
                    <h3>Second slide label</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                    </Carousel.Caption>
                </Carousel.Item>
                <Carousel.Item>
                    <img
                    className="d-block w-100"
                    src="holder.js/800x400?text=Third slide&bg=20232a"
                    alt="Third slide"
                    />
                    <Carousel.Caption>
                    <h3>Third slide label</h3>
                    <p>
                        Praesent commodo cursus magna, vel scelerisque nisl consectetur.
                    </p>
                    </Carousel.Caption>
                </Carousel.Item>
            </Carousel>
        </div>
    );
}
export default Slider;

App.js代码 #

import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import Slider from "./Slider";

function App() {
  return (
    <>
      <Header/>
      <Slider/>
      <Footer/>
    </>
  );
}
export default App;

控制台错误提示（翻译后） #

react.development.js:209 警告：无效的Hook调用。Hooks只能在函数组件的主体内部调用。可能由以下原因导致：

1. React与渲染器（如React DOM）版本不匹配
2. 违反了Hooks使用规则
3. 应用中存在多个React副本

解决步骤 #

1. 统一React与react-dom版本 #

查看项目根目录下package.json文件，确认react和react-dom的版本号是否一致。若版本不同，执行以下命令安装匹配版本（替换x.x.x为目标版本号）：

npm install react@x.x.x react-dom@x.x.x

2. 检查Hooks使用规范 #

确保项目中所有Hooks（包括react-bootstrap内部依赖的Hooks）都符合使用规则：

• 仅在函数组件的顶级作用域调用Hooks
• 不在循环、条件判断或嵌套函数内调用Hooks

3. 消除多React副本问题 #

• 执行npm ls react查看项目依赖树，确认是否存在多个React实例
• 若存在重复，删除node_modules文件夹和package-lock.json（或yarn.lock），重新执行npm install
• 若使用npm link引入本地组件库导致冲突，可在项目构建配置中添加别名，强制使用项目根目录的React：
  Webpack配置示例：

  // webpack.config.js
  const path = require('path');
  
  module.exports = {
    resolve: {
      alias: {
        'react': path.resolve(__dirname, 'node_modules/react'),
        'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
      }
    }
  };
  

  Vite配置示例：

  // vite.config.js
  import { defineConfig } from 'vite';
  import path from 'path';
  
  export default defineConfig({
    resolve: {
      alias: {
        'react': path.resolve(__dirname, './node_modules/react'),
        'react-dom': path.resolve(__dirname, './node_modules/react-dom')
      }
    }
  });
  

内容的提问来源于stack exchange，提问作者Melih Bektas