Lovable's AI sometimes removes components it considers unused or redundant during code generation. Prevent this by adding explicit preservation rules in your AGENTS.md file, using @file references to scope changes to specific files, and recovering deleted components from version history. The AI deletes components when it interprets broad prompts as permission to restructure your codebase.
Why Lovable removes components you did not ask it to delete
When you prompt Lovable to make changes, the AI analyzes your codebase and sometimes decides that certain components are no longer needed. This can happen for several reasons: the AI might consolidate two similar components into one, remove a component it thinks is unused, or restructure your file layout as part of implementing a new feature. This behavior is especially common with broad prompts like 'clean up my code' or 'refactor the dashboard.' The AI interprets these as permission to make structural changes, which can include deleting components you intended to keep. It may also remove components that are imported dynamically or used in ways the AI does not fully trace. The good news is that Lovable's version history preserves every previous state of your project. You can always recover deleted components by reverting to an earlier version. But prevention is better than recovery, so adding clear rules to your AGENTS.md is the most effective long-term solution.
- Broad prompts like 'refactor' or 'clean up' are interpreted as permission to delete components
- The AI considers a component unused because it cannot trace dynamic imports or conditional rendering
- Implementing a new feature causes the AI to merge or replace existing components it deems similar
- No AGENTS.md file with preservation rules exists to guide the AI's behavior
- The prompt does not use @file references, so the AI modifies files beyond the intended scope
Error messages you might see
Cannot find module '@/components/DeletedComponent'A component file was removed by the AI during a recent edit. Other files still import it, causing this error. Recover the file from version history or re-create it.
Element type is invalid: expected a string or a class/function but got: undefinedA component that was being used in JSX has been deleted or renamed. The import resolves to undefined because the file no longer exists. Check version history to find the removed file.
'ComponentName' is not exported from '@/components/ComponentName'The component file still exists but the export was removed or renamed during an AI edit. Check the file to see if the export statement was changed.
Before you start
- A Lovable project with components you want to protect from AI deletion
- Access to the Lovable editor (Agent Mode for making changes, version history for recovery)
- Familiarity with @file syntax for scoping AI changes to specific files
How to fix it
Add preservation rules to AGENTS.md
AGENTS.md rules are read by the AI on every session, providing persistent instructions that prevent unwanted deletions
Add preservation rules to AGENTS.md
AGENTS.md rules are read by the AI on every session, providing persistent instructions that prevent unwanted deletions
Create or update an AGENTS.md file in your project root. Add a clear Preservation Rules section that explicitly lists which components and files must never be deleted or renamed. Be specific — list the actual file paths. The AI reads this file at the start of every session and follows these rules when generating code.
// No AGENTS.md file or no preservation rules# AGENTS.md## Preservation Rules — NEVER delete or rename these files:- src/components/Sidebar.tsx- src/components/Header.tsx- src/components/AuthProvider.tsx- src/pages/Dashboard.tsx- src/pages/Settings.tsx- src/hooks/useAuth.ts## General Rules:- Never delete any component file without explicit user instruction- Never merge two components into one without explicit user instruction- Never rename files or change export names without explicit user instruction- If a component appears unused, leave it in place and mention it in chatExpected result: The AI acknowledges these rules in future sessions and avoids deleting listed files unless explicitly told to.
Use @file references to scope AI changes
Specifying exact files prevents the AI from touching files outside the intended scope of your request
Use @file references to scope AI changes
Specifying exact files prevents the AI from touching files outside the intended scope of your request
When prompting Lovable, always reference the specific files you want changed using the @file syntax. Instead of saying 'update the dashboard,' say '@src/pages/Dashboard.tsx add a search bar above the table.' This tells the AI exactly which file to modify and implicitly instructs it to leave all other files alone. The more specific your reference, the less likely the AI is to make unintended changes elsewhere.
// Broad prompt that may cause unintended deletions:// "Refactor the dashboard to use a new layout"// Scoped prompt that protects other files:// "In @src/pages/Dashboard.tsx, change the layout to use a two-column// grid. Keep all existing components and imports. Only modify the// JSX layout structure in this file."Expected result: The AI modifies only the referenced file. Other components and files remain untouched.
Recover deleted components from version history
Version history preserves every previous state of your project, making recovery straightforward
Recover deleted components from version history
Version history preserves every previous state of your project, making recovery straightforward
If the AI has already deleted a component, scroll up in the Lovable chat to find the version before the deletion. You can also click the View History icon to browse all versions. Find the version where the component still existed and click Revert. This restores your entire project to that state. If you want to keep recent changes but recover only the deleted file, revert to the old version, copy the component code from Dev Mode, revert back to the latest version, and paste the component code into a new file.
// Component was deleted — import error in other files// Cannot find module '@/components/Sidebar'// Step 1: Scroll up in chat or click View History icon// Step 2: Find the version before the deletion// Step 3: Click Revert to restore the project// Step 4: If needed, copy the component and re-apply recent changesExpected result: The deleted component is restored and all imports work again. No data or code is permanently lost.
Use Plan Mode before making structural changes
Plan Mode shows what the AI intends to do without actually modifying code, letting you catch deletions before they happen
Use Plan Mode before making structural changes
Plan Mode shows what the AI intends to do without actually modifying code, letting you catch deletions before they happen
Before sending prompts that involve refactoring or restructuring, switch to Plan Mode. Ask the AI to describe what changes it would make. Review the plan carefully, looking for any mentions of removing, consolidating, or deleting files. If the plan includes unwanted deletions, tell the AI to keep those files. Once the plan is safe, click Implement the plan to execute only the approved changes. If your project has many interconnected components and structural changes span multiple files, RapidDev's engineers have managed this exact scenario across 600+ Lovable projects.
// Risky: sending a refactoring prompt directly in Agent Mode// Safe: using Plan Mode first// Plan Mode prompt: "I want to refactor the dashboard layout.// Show me exactly which files you would modify, create, or delete.// Do NOT delete any existing component files."//// Review the plan → confirm no deletions → click Implement the planExpected result: You see the AI's plan before any code changes. Any unwanted file deletions are caught and prevented.
Complete code example
1# Project Agent Rules23## CRITICAL — Component Preservation4The following files and directories must NEVER be deleted, renamed, or merged:56### Protected Components7- src/components/layout/Sidebar.tsx8- src/components/layout/Header.tsx9- src/components/layout/Footer.tsx10- src/components/auth/AuthProvider.tsx11- src/components/auth/ProtectedRoute.tsx1213### Protected Pages14- src/pages/Dashboard.tsx15- src/pages/Settings.tsx16- src/pages/Profile.tsx1718### Protected Hooks19- src/hooks/useAuth.ts20- src/hooks/useSupabase.ts2122## Rules for Code Changes231. Only modify files explicitly mentioned in the user prompt242. Never remove imports that appear unused — they may be used dynamically253. Never consolidate components unless the user explicitly says to merge them264. If you believe a component is unused, mention it in chat and ask — do not delete it275. When refactoring, preserve all existing exports and their names286. Always keep the existing file and folder structure intact2930## When Adding New Features31- Create new files rather than replacing existing ones32- Add imports to existing files rather than restructuring them33- If a new component overlaps with an existing one, ask the user which to keepBest practices to prevent this
- Add a Preservation Rules section to AGENTS.md listing every critical component file path
- Always use @file references in prompts to prevent the AI from modifying unrelated files
- Use Plan Mode before any prompt that involves refactoring, cleanup, or restructuring
- Avoid vague prompts like 'clean up the code' — be specific about what you want changed and what should stay
- Check the AI's chat output after every edit to see which files it modified, created, or deleted
- Use version history proactively — check it regularly so you know which version to revert to if needed
- If a component is conditionally rendered or dynamically imported, explicitly mention it in AGENTS.md as in-use
- After recovering a deleted component, immediately add it to the preservation list in AGENTS.md
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
Lovable's AI deleted a component from my project that I still need. Here is the import error I am seeing: [paste the error message here] And here is my current file structure: [paste your file tree or list of components here] Please: 1. Identify which component was deleted based on the error 2. Write a Lovable prompt to recreate it 3. Write AGENTS.md preservation rules to prevent this from happening again 4. Suggest how to scope future prompts to avoid unintended deletions
A component was accidentally deleted from my project. Please recreate @src/components/Sidebar.tsx based on how it was used in @src/pages/Dashboard.tsx and @src/components/layout/AppLayout.tsx. Restore all the original functionality including navigation links, active state highlighting, and responsive collapse behavior. Do not modify any other files except to fix broken imports pointing to the old Sidebar.
Frequently asked questions
Why did Lovable delete my component without me asking?
Lovable's AI interprets broad prompts as permission to restructure code. If you said 'refactor the dashboard' or 'clean up unused code,' the AI may decide that certain components are unnecessary and remove them. Use specific @file references and add preservation rules to AGENTS.md to prevent this.
How do I recover a component that Lovable deleted?
Use version history. Scroll up in the Lovable chat to find the version before the deletion, or click the View History icon. Click Revert to restore the project to that state. If you want to keep recent changes, copy the deleted component code first, then revert back to the latest version and paste it in.
Does AGENTS.md actually prevent the AI from deleting files?
Yes, when the rules are clear and specific. List exact file paths under a 'Never delete' section. The AI reads AGENTS.md at the start of every session. While not 100% guaranteed, explicit preservation rules significantly reduce accidental deletions.
How do I scope AI changes to specific files in Lovable?
Use the @file syntax in your prompts. For example: '@src/pages/Dashboard.tsx add a search bar above the table.' This tells the AI to only modify that specific file. Without @file references, the AI may modify multiple files to implement your request.
Can Plan Mode prevent accidental component deletion?
Yes. Plan Mode shows the AI's intended changes without modifying code. Before any structural change, switch to Plan Mode and ask what files will be modified, created, or deleted. If the plan includes unwanted deletions, correct it before switching to Agent Mode.
What if I can't fix this myself?
If your project has broken imports from deleted components and you are not sure how to reconstruct them, RapidDev's engineers can help. They have recovered and protected components across 600+ Lovable projects and can restore your project to a working state quickly.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your issue.
Book a free consultation