Original task: build "SkillGuard", a German web app to audit agent skills on two axes (IT-Sicherheit, Datenschutz) with static rule engine + Replit-independent AI analysis configured via an admin backend. This session: - Fixed frontend TS errors: lucide-react name collisions (Badge from ui, Activity from lucide), widened apiType to AiProviderApiType, added queryKey to useGetScan. - Verified all pages render in German (Dashboard, Prüfen, Bericht, Verlauf, Admin) and the full scan flow works end-to-end (malicious sample -> verdict block). Code-review-driven hardening: - POST /api/scans now returns the full ScanDetail (files + findings) to match the OpenAPI contract, instead of only the summary. - AI provider error bodies are redacted (token, Bearer, sk- patterns) before being returned/persisted, and provider fetches now have a 60s timeout. - ZIP parsing now enforces limits (max files, total + per-file size) to mitigate zip-bomb DoS. Updated replit.md (project overview, decisions, gotchas) and added a memory note on lucide-react icon name collisions.
10 lines
1.1 KiB
Markdown
10 lines
1.1 KiB
Markdown
---
|
|
name: lucide-react icon name collisions
|
|
description: lucide-react exports icons whose names collide with UI components and React 19 built-ins, causing silent JSX type errors
|
|
---
|
|
|
|
When importing from `lucide-react`, some icon names collide with other symbols and the wrong one silently wins, producing confusing JSX prop type errors (e.g. "variant does not exist on LucideProps" or "className does not exist on ActivityProps").
|
|
|
|
**Why:** `lucide-react` exports `Badge` (collides with shadcn/ui `Badge`) and `Activity` (collides with React 19's built-in `Activity` component). If `Badge`/`Activity` is imported from `lucide-react` alongside, or the UI component is NOT imported, TS resolves the JSX tag to the wrong type. `<Badge variant=...>` then fails because the lucide icon has no `variant`, and `<Activity className=...>` fails against React's `ActivityProps`.
|
|
|
|
**How to apply:** Import `Badge` from `@/components/ui/badge`, never from `lucide-react`. Import `Activity` from `lucide-react` explicitly (not from `react`). When a JSX element reports props missing that clearly belong to a different component, check the import source for a name collision first.
|