172 lines
3.8 KiB
Markdown
172 lines
3.8 KiB
Markdown
# Fix for GitHub Issue #291: CopilotSidebar Import Error
|
|
|
|
## 🐛 **Issue**
|
|
User encounters error: `'CopilotSidebar' is not exported from '@copilotkit/react-ui'`
|
|
|
|
## 🔍 **Root Cause**
|
|
The user **did not run `npm install`** after cloning/pulling the repository, causing missing or outdated CopilotKit dependencies.
|
|
|
|
## ✅ **Solution**
|
|
|
|
### **Step 1: Clean Install Dependencies**
|
|
|
|
```bash
|
|
cd frontend
|
|
rm -rf node_modules package-lock.json
|
|
npm install
|
|
```
|
|
|
|
**For Windows PowerShell:**
|
|
```powershell
|
|
cd frontend
|
|
Remove-Item -Recurse -Force node_modules, package-lock.json -ErrorAction SilentlyContinue
|
|
npm install
|
|
```
|
|
|
|
### **Step 2: Verify CopilotKit Installation**
|
|
|
|
Check that the following packages are installed:
|
|
```bash
|
|
npm list @copilotkit/react-core @copilotkit/react-ui @copilotkit/shared
|
|
```
|
|
|
|
Expected output:
|
|
```
|
|
@copilotkit/react-core@1.10.3
|
|
@copilotkit/react-ui@1.10.3
|
|
@copilotkit/shared@1.10.3
|
|
```
|
|
|
|
### **Step 3: Build the Frontend**
|
|
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
### **Step 4: Start Development Server**
|
|
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
## 📋 **Complete Setup Instructions for New Users**
|
|
|
|
### **Frontend Setup:**
|
|
```bash
|
|
# Navigate to frontend directory
|
|
cd frontend
|
|
|
|
# Install dependencies
|
|
npm install
|
|
|
|
# Create .env file from template
|
|
cp env_template.txt .env
|
|
|
|
# Add your environment variables to .env:
|
|
# REACT_APP_CLERK_PUBLISHABLE_KEY=<your-clerk-key>
|
|
# REACT_APP_COPILOTKIT_API_KEY=<your-copilotkit-key>
|
|
|
|
# Build the project
|
|
npm run build
|
|
|
|
# Start development server
|
|
npm start
|
|
```
|
|
|
|
### **Backend Setup:**
|
|
```bash
|
|
# Navigate to backend directory
|
|
cd backend
|
|
|
|
# Create virtual environment
|
|
python -m venv .venv
|
|
|
|
# Activate virtual environment
|
|
# Windows:
|
|
.venv\Scripts\activate
|
|
# macOS/Linux:
|
|
source .venv/bin/activate
|
|
|
|
# Install dependencies
|
|
pip install -r requirements.txt
|
|
|
|
# Create .env file from template
|
|
cp env_template.txt .env
|
|
|
|
# Add your environment variables to .env
|
|
|
|
# Initialize database tables
|
|
python scripts/create_subscription_tables.py
|
|
|
|
# Start backend server
|
|
python app.py
|
|
```
|
|
|
|
## 🎯 **Why This Happens**
|
|
|
|
1. **Missing `node_modules`**: Package dependencies not installed
|
|
2. **Outdated packages**: Old version of CopilotKit that doesn't export `CopilotSidebar`
|
|
3. **Skipped installation**: Running `npm start` before `npm install`
|
|
|
|
## ✅ **Verification**
|
|
|
|
After following the steps above, you should see:
|
|
- ✅ No import errors for `CopilotSidebar`
|
|
- ✅ Frontend compiles successfully
|
|
- ✅ Development server starts on `http://localhost:3000`
|
|
- ✅ Backend API accessible on `http://localhost:8000`
|
|
|
|
## 📚 **Reference**
|
|
|
|
- [CopilotKit UI Components Documentation](https://docs.copilotkit.ai/crewai-crews/custom-look-and-feel/built-in-ui-components)
|
|
- CopilotKit exports: `CopilotChat`, `CopilotSidebar`, `CopilotPopup` from `@copilotkit/react-ui`
|
|
|
|
## 🚨 **Common Mistakes to Avoid**
|
|
|
|
1. ❌ Running `npm start` without `npm install` first
|
|
2. ❌ Using outdated `package-lock.json`
|
|
3. ❌ Missing environment variables in `.env` files
|
|
4. ❌ Not running database migration scripts for backend
|
|
|
|
## 💡 **Pro Tip**
|
|
|
|
Always run these commands after pulling new code:
|
|
```bash
|
|
# Frontend
|
|
cd frontend && npm install && npm run build
|
|
|
|
# Backend
|
|
cd backend && pip install -r requirements.txt
|
|
```
|
|
|
|
---
|
|
|
|
## 🐛 **Issue: "Failed to process subscription" (500 Error)**
|
|
|
|
**Symptoms:**
|
|
- User selects Free or Basic plan on Pricing page
|
|
- Clicks "Subscribe to [Plan]"
|
|
- Gets error: "Failed to process subscription"
|
|
- Backend logs: `name 'UsageStatus' is not defined`
|
|
|
|
**Root Cause:**
|
|
Missing `UsageStatus` import in `backend/api/subscription_api.py`
|
|
|
|
**Fix:**
|
|
✅ Already fixed in latest version. Update to latest code:
|
|
|
|
```bash
|
|
git pull origin main
|
|
cd backend
|
|
python app.py # Restart backend
|
|
```
|
|
|
|
**Verify Fix:**
|
|
Check that `backend/api/subscription_api.py` line 18 includes:
|
|
```python
|
|
from models.subscription_models import (
|
|
..., UsageStatus # <-- This should be present
|
|
)
|
|
```
|
|
|