Resolving ESLint Warnings and Errors in Lovable Code

Why ESLint warnings appear in Lovable-generated code

Lovable's AI generates functional code, but ESLint applies stricter standards than just 'works correctly.' The AI may declare variables it does not end up using, import components it later decides not to include, or write useEffect hooks with incomplete dependency arrays. These are not bugs that break your app, but they indicate code quality issues that can lead to real bugs later. The most impactful ESLint warnings in Lovable code are the React hooks rules. Calling a hook inside a conditional statement, a loop, or a nested function breaks React's internal state tracking and causes unpredictable behavior. The exhaustive-deps rule for useEffect prevents stale closure bugs that are among the hardest to debug. While it is tempting to disable ESLint rules that produce many warnings, most rules exist for good reasons. The better approach is to fix the warnings or, for intentionally unused parameters, use the underscore prefix convention to communicate intent.

• Lovable generates import statements for components it does not end up using in the final code
• useEffect dependency arrays are incomplete, triggering the exhaustive-deps rule
• Hooks are called inside conditional blocks, violating the Rules of Hooks
• TypeScript strict mode is not enabled, so implicit any types are widespread
• Variables are declared in one generation step but the code that uses them is generated in a later step

Error messages you might see

Before you start

• A Lovable project with ESLint warnings visible in Dev Mode or the browser console
• Basic understanding of React hooks (useState, useEffect, useCallback)
• Access to the Lovable editor for fixing the warnings

How to fix it

import { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card"; // Never used
const MyComponent = () => {
  const [count, setCount] = useState(0); // count never read
  const data = fetchData(); // data never used
  return <Button>Click</Button>;
};

import { Button } from "@/components/ui/button";
// Removed: useState, useEffect, useCallback, Card (all unused)
const MyComponent = () => {
  // Removed: unused count state and data variable
  return <Button>Click</Button>;
};

const [userId, setUserId] = useState("1");
const [data, setData] = useState(null);
// Warning: missing dependency 'userId'
useEffect(() => {
  fetch(`/api/users/${userId}`).then(r => r.json()).then(setData);
}, []);

const [userId, setUserId] = useState("1");
const [data, setData] = useState(null);
// Fixed: userId in dependency array
useEffect(() => {
  let cancelled = false;
  fetch(`/api/users/${userId}`)
    .then(r => r.json())
    .then(d => { if (!cancelled) setData(d); });
  return () => { cancelled = true; };
}, [userId]);

const MyComponent = ({ showCounter }: { showCounter: boolean }) => {
  // Error: hook called conditionally
  if (showCounter) {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }
  return <p>No counter</p>;
};

const MyComponent = ({ showCounter }: { showCounter: boolean }) => {
  // Fixed: hook always called at top level
  const [count, setCount] = useState(0);
  if (!showCounter) {
    return <p>No counter</p>;
  }
  return <button onClick={() => setCount((prev) => prev + 1)}>{count}</button>;
};

const handleSubmit = (data: any) => {
  const result: any = processData(data);
  setItems(result.items as any[]);
};

type FormData = {
  name: string;
  email: string;
};
type ProcessResult = {
  items: string[];
  total: number;
};
const handleSubmit = (data: FormData) => {
  const result: ProcessResult = processData(data);
  setItems(result.items);
};

Complete code example

1import { useState, useEffect } from "react";
2import { Button } from "@/components/ui/button";
3
4// Specific type instead of 'any'
5type User = {
6  id: string;
7  name: string;
8  email: string;
9};
10
11type CleanComponentProps = {
12  userId: string;
13  onSelect?: (user: User) => void;
14};
15
16const CleanComponent = ({ userId, onSelect }: CleanComponentProps) => {
17  const [user, setUser] = useState<User | null>(null);
18  const [loading, setLoading] = useState(true);
19
20  // All dependencies included, cleanup function present
21  useEffect(() => {
22    let cancelled = false;
23    setLoading(true);
24
25    fetch(`/api/users/${userId}`)
26      .then((res) => res.json())
27      .then((data: User) => {
28        if (!cancelled) {
29          setUser(data);
30          setLoading(false);
31        }
32      })
33      .catch(() => {
34        if (!cancelled) setLoading(false);
35      });
36
37    return () => { cancelled = true; };
38  }, [userId]); // userId is the only dependency
39
40  // Intentionally unused parameter prefixed with _
41  const handleKeyDown = (_event: React.KeyboardEvent) => {
42    // Handler structure needed for accessibility
43  };
44
45  if (loading) return <p>Loading...</p>;
46  if (!user) return <p>User not found</p>;
47
48  return (
49    <div className="space-y-4" onKeyDown={handleKeyDown}>
50      <h2 className="text-xl font-bold">{user.name}</h2>
51      <p className="text-muted-foreground">{user.email}</p>
52      {onSelect && (
53        <Button onClick={() => onSelect(user)}>Select User</Button>
54      )}
55    </div>
56  );
57};
58
59export default CleanComponent;

Best practices to prevent this

• Remove unused imports and variables immediately — they accumulate quickly in AI-generated code
• Never suppress the exhaustive-deps ESLint warning — fix the dependency issue instead
• Prefix intentionally unused parameters with underscore (_event, _index) to suppress warnings without disabling rules
• Always call React hooks at the top level of the component — never inside conditionals, loops, or nested functions
• Define TypeScript types for all function parameters and return values instead of using any
• Use the unknown type instead of any when the type is genuinely unknown — it forces type narrowing
• Configure ESLint rules as warnings during development and errors in production builds
• Ask Lovable to fix ESLint warnings as a dedicated prompt rather than mixing with feature requests

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns