React Bootstrap Accordion从CRA迁移到NextJS后无法运行如何解决？

解决方案 #

1. 检查react-bootstrap版本
   Accordion是react-bootstrap v2.0.0之后才新增的内置组件，低于该版本的包里不存在该组件，会直接导出undefined触发报错。打开项目package.json确认react-bootstrap版本≥2.0.0，版本不符合的话执行升级命令：
   npm install react-bootstrap@latest bootstrap@latest
   升级完成后需要确保全局引入了Bootstrap样式，Pages Router在_app.js中引入，App Router在根layout.js中引入：
   import 'bootstrap/dist/css/bootstrap.min.css'

2. 适配Next.js组件渲染规则
   如果使用的是Next.js 13+的App Router（app目录），所有react-bootstrap组件都属于客户端组件，必须在使用Accordion的组件文件顶部添加'use client'指令，否则服务端渲染模式下无法正确加载客户端组件，会返回undefined触发报错。

3. 使用标准导入写法
   react-bootstrap官方支持两种合法导入方式，任选一种即可：

• 从全量包命名导入：import { Accordion } from 'react-bootstrap'
• 从子路径默认导入：import Accordion from 'react-bootstrap/Accordion'

4. 清除缓存重试
   如果以上配置都正确依然报错，大概率是依赖缓存问题，执行以下命令重装依赖即可：

rm -rf node_modules package-lock.json
npm install

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