first commit
This commit is contained in:
122
fix-remaining-imports.md
Normal file
122
fix-remaining-imports.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# Final Fix for Any Remaining Figma Imports
|
||||
|
||||
If you encounter any remaining `figma:asset` imports, here are the replacement patterns:
|
||||
|
||||
## Quick Fix Script (Run in project root)
|
||||
|
||||
### For Windows PowerShell:
|
||||
```powershell
|
||||
# Fix any remaining figma:asset imports in all TypeScript files
|
||||
Get-ChildItem -Recurse -Include "*.tsx","*.ts" | ForEach-Object {
|
||||
$content = Get-Content $_.FullName -Raw
|
||||
if ($content -match 'import.*from "figma:asset/[^"]+";') {
|
||||
Write-Host "Fixing: $($_.Name)"
|
||||
|
||||
# Replace figma:asset imports with placeholder images
|
||||
$content = $content -replace 'import\s+(\w+)\s+from\s+"figma:asset/[^"]+";', 'const $1 = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";'
|
||||
|
||||
Set-Content -Path $_.FullName -Value $content
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### For Mac/Linux Bash:
|
||||
```bash
|
||||
# Find and fix all figma:asset imports
|
||||
find . -name "*.tsx" -o -name "*.ts" | grep -v node_modules | xargs grep -l "figma:asset" | while read file; do
|
||||
echo "Fixing: $file"
|
||||
sed -i 's/import \([a-zA-Z0-9_]*\) from "figma:asset\/[^"]*";/const \1 = "https:\/\/images.unsplash.com\/photo-1551650975-87deedd944c3?w=600\&h=400\&fit=crop\&auto=format";/g' "$file"
|
||||
done
|
||||
```
|
||||
|
||||
## Manual Replacement Patterns
|
||||
|
||||
If you prefer to fix them manually, replace any remaining:
|
||||
|
||||
### Project Images:
|
||||
```tsx
|
||||
// OLD:
|
||||
import projectImage from "figma:asset/...";
|
||||
|
||||
// NEW:
|
||||
const projectImage = "https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format";
|
||||
```
|
||||
|
||||
### Logo Images:
|
||||
```tsx
|
||||
// OLD:
|
||||
import logoImage from "figma:asset/...";
|
||||
|
||||
// NEW:
|
||||
const logoImage = "https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=120&h=60&fit=crop&auto=format";
|
||||
```
|
||||
|
||||
### Profile Images:
|
||||
```tsx
|
||||
// OLD:
|
||||
import profileImage from "figma:asset/...";
|
||||
|
||||
// NEW:
|
||||
const profileImage = "https://images.unsplash.com/photo-1494790108755-2616b332c5cd?w=150&h=150&fit=crop&auto=format";
|
||||
```
|
||||
|
||||
### Mobile App Screenshots:
|
||||
```tsx
|
||||
// OLD:
|
||||
import appScreenshot from "figma:asset/...";
|
||||
|
||||
// NEW:
|
||||
const appScreenshot = "https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=300&h=600&fit=crop&auto=format";
|
||||
```
|
||||
|
||||
## Image Categories by Use Case
|
||||
|
||||
### Technology/Development:
|
||||
- `https://images.unsplash.com/photo-1517077304055-6e89abbf09b0?w=600&h=400&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1551650975-87deedd944c3?w=600&h=400&fit=crop&auto=format`
|
||||
|
||||
### Business/Corporate:
|
||||
- `https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&h=400&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=600&h=400&fit=crop&auto=format`
|
||||
|
||||
### Mobile Apps:
|
||||
- `https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=300&h=600&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format`
|
||||
|
||||
### Healthcare:
|
||||
- `https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&h=400&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1559757148-5c350d0d3c56?w=400&h=300&fit=crop&auto=format`
|
||||
|
||||
### Finance/FinTech:
|
||||
- `https://images.unsplash.com/photo-1559526324-593bc073d938?w=600&h=400&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&h=400&fit=crop&auto=format`
|
||||
|
||||
### E-commerce:
|
||||
- `https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=600&h=400&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=600&h=400&fit=crop&auto=format`
|
||||
|
||||
### Professional Headshots:
|
||||
- `https://images.unsplash.com/photo-1494790108755-2616b332c5cd?w=150&h=150&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&auto=format`
|
||||
- `https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&auto=format`
|
||||
|
||||
## Verification
|
||||
|
||||
After running the fix:
|
||||
|
||||
1. **Search for remaining imports**:
|
||||
```bash
|
||||
grep -r "figma:asset" . --exclude-dir=node_modules
|
||||
```
|
||||
|
||||
2. **Start the dev server**:
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. **Check for errors**:
|
||||
- No import resolution errors
|
||||
- All images load properly
|
||||
- Clean console output
|
||||
|
||||
The project should now run completely error-free! 🎉
|
||||
Reference in New Issue
Block a user