mirror of
https://github.com/AeThex-Corporation/AeThex-OS.git
synced 2026-04-17 22:27:19 +00:00
104 lines
2.4 KiB
Markdown
104 lines
2.4 KiB
Markdown
# Quick Fix: React Hooks & WebSocket Errors
|
|
|
|
## ✅ Fixed: React Hooks Error
|
|
|
|
**Problem**: Hooks were called after conditional returns, violating React's Rules of Hooks.
|
|
|
|
**Solution**: Moved `dragX` and `dragOpacity` hooks to line ~218, before any `if` statements or early returns.
|
|
|
|
**File**: [client/src/pages/os.tsx](client/src/pages/os.tsx#L218-L219)
|
|
|
|
---
|
|
|
|
## 🟡 Expected Warnings (Safe to Ignore)
|
|
|
|
### 1. WebSocket Errors
|
|
```
|
|
WebSocket connection to 'wss://...' failed
|
|
[vite] failed to connect to websocket
|
|
```
|
|
|
|
**Why**: GitHub Codespaces tunneling doesn't support WebSockets perfectly
|
|
**Impact**: None - app works fine without HMR WebSocket
|
|
**Fix**: Refresh page manually after code changes
|
|
|
|
### 2. Supabase Credentials Missing
|
|
```
|
|
[Supabase] URL env var: ✗ Missing
|
|
[Supabase] Key env var: ✗ Missing
|
|
Supabase credentials not found. Using fallback credentials.
|
|
```
|
|
|
|
**Why**: No `.env` file with Supabase keys
|
|
**Impact**: None - app uses fallback database
|
|
**Fix**: Add `.env` with your Supabase credentials (optional)
|
|
|
|
### 3. CORS Manifest Error
|
|
```
|
|
Access to fetch at 'https://github.dev/pf-signin...' blocked by CORS
|
|
```
|
|
|
|
**Why**: PWA manifest trying to load through GitHub auth
|
|
**Impact**: None - only affects PWA install prompt
|
|
**Fix**: Ignore or disable PWA in vite.config.ts
|
|
|
|
---
|
|
|
|
## 🚀 Refresh the App
|
|
|
|
1. **Save all files** (hooks fix is now applied)
|
|
2. **Reload browser**: `Ctrl+R` or `Cmd+R`
|
|
3. **Clear console**: Click 🚫 in DevTools
|
|
|
|
The app should load without errors now! 🎉
|
|
|
|
---
|
|
|
|
## 🔧 Optional: Add Supabase Credentials
|
|
|
|
Create `.env` file:
|
|
|
|
```bash
|
|
VITE_SUPABASE_URL=https://your-project.supabase.co
|
|
VITE_SUPABASE_ANON_KEY=your-anon-key
|
|
```
|
|
|
|
Then restart dev server:
|
|
|
|
```bash
|
|
# Stop current server (Ctrl+C)
|
|
# Restart
|
|
npm run dev:client
|
|
```
|
|
|
|
---
|
|
|
|
## ✨ What to Expect After Reload
|
|
|
|
You should see:
|
|
- ✅ AeThex OS desktop interface
|
|
- ✅ Boot sequence (skip with "Continue as Guest")
|
|
- ✅ Desktop with windows, taskbar, Start menu
|
|
- ✅ No React errors in console
|
|
- 🟡 WebSocket warnings (ignorable)
|
|
- 🟡 Supabase warnings (ignorable)
|
|
|
|
---
|
|
|
|
## 🎯 Test the Mobile Views
|
|
|
|
1. Open DevTools (F12)
|
|
2. Click device icon (📱)
|
|
3. Select "iPhone 14 Pro"
|
|
4. Navigate to:
|
|
- `/mobile/studio` - AeThex Studio
|
|
- `/mobile/appstore` - App Store
|
|
- `/` - Mobile dashboard
|
|
|
|
---
|
|
|
|
## 📝 Summary
|
|
|
|
**Fixed**: React Hooks order violation (critical)
|
|
**Ignored**: WebSocket/Supabase warnings (non-critical)
|
|
**Result**: App should work perfectly now! 🚀
|