React + Vite环境中reactstrap包解析失败的解决求助

步骤1：补全依赖安装 #

reactstrap依赖bootstrap和react-dom，部分场景下官方安装指引可能未明确提示需手动安装bootstrap（reactstrap本身不包含样式文件），同时要确保依赖版本与当前React环境兼容。执行以下命令重装完整依赖：

# 卸载现有问题依赖（可选）
npm uninstall reactstrap bootstrap

# 重新安装兼容版本
npm install reactstrap bootstrap react-dom

步骤2：配置Vite的依赖解析规则 #

新版本Vite对package.json的exports字段解析严格，部分reactstrap版本存在入口配置适配问题。在vite.config.ts中添加如下配置，指定reactstrap的具体入口文件：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      'reactstrap': 'reactstrap/dist/reactstrap.cjs.js'
    }
  },
  optimizeDeps: {
    include: ['reactstrap']
  }
})

步骤3：引入Bootstrap样式 #

reactstrap组件依赖Bootstrap的CSS才能正常渲染，在src/main.tsx中全局引入样式文件：

import 'bootstrap/dist/css/bootstrap.min.css';

步骤4：修正组件代码中的语法问题 #

移除JSX元素后的多余分号，确保代码规范：

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import { Button } from 'reactstrap';
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <Button color="danger">Danger!</Button>
    </>
  )
}

export default App

步骤5：清除缓存并重启服务 #

执行命令清除Vite缓存后重启开发服务：

rm -rf node_modules/.vite
npm run dev

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