reactstrap是否兼容Bootstrap v5？react-popper导出报错如何解决

兼容性确认 #

reactstrap v9.x版本已官方支持Bootstrap v5，你当前安装的reactstrap@9.0.0和bootstrap@5.1.3的版本组合本身是兼容的，无需调整版本匹配。

报错根因 #

该报错是Next.js 12的ES模块默认解析规则导致的：react-popper v2.x输出的是CommonJS模块，而reactstrap内部采用了命名导入的方式引用react-popper的导出，Next.js服务端渲染时不支持CommonJS模块的命名导入，就触发了这个语法错误。

具体修复方案 #

• 方案1：修改next.config.js配置，将react-popper加入transpilePackages列表
  打开项目根目录的next.config.js，添加如下配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    transpilePackages: ['react-popper', '@popperjs/core'],
  }
  
  module.exports = nextConfig
  

  该配置会让Next.js在构建时自动转译react-popper和@popperjs/core的代码，兼容CommonJS模块的命名导入规则，是优先推荐的修复方案。

• 方案2：临时降级reactstrap版本
  如果你不想修改next配置，可以将reactstrap降级到8.x版本，该版本依赖的react-popper版本适配Next.js 12的默认解析规则，注意reactstrap 8.x仅支持Bootstrap 4，需要同步将bootstrap依赖版本调整到^4.6.0。

• 方案3：手动重写react-popper导入（仅作为临时验证用）
  你可以在项目的pages/_app.js顶部提前导入并挂载react-popper的导出：

  import * as ReactPopper from 'react-popper'
  if (typeof window === 'undefined') {
    global.ReactPopper = ReactPopper
  }
  

验证步骤 #

修改配置后执行如下操作确认修复：

1. 删除项目根目录的.next缓存文件夹
2. 执行npm install或yarn install重新安装依赖
3. 执行npm run dev重启开发服务器即可正常访问

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