'x' is defined but never used. (no-unused-vars)
'React' is defined but never used. (no-unused-vars)

ESLint found variables, imports, or function parameters that are declared but never used.

Fix 1: Remove the Unused Variable

// ❌ Unused import
import { useState, useEffect } from 'react';
// Only using useState

// ✅ Remove unused import
import { useState } from 'react';

Fix 2: Prefix With Underscore

// ✅ Convention: prefix unused vars with _
function handler(_req, res) {  // _req signals "intentionally unused"
    res.json({ ok: true });
}

// Configure ESLint to allow this:
// .eslintrc
{
    "rules": {
        "no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
    }
}

Fix 3: Destructuring — Ignore Some Properties

// ❌ Only need some properties
const { name, age, email } = user;  // Only using name

// ✅ Use rest pattern
const { name, ..._ } = user;

// Or just access directly
console.log(user.name);

Fix 4: React 17+ — No Need to Import React

// ❌ React 17+ with new JSX transform
import React from 'react';  // 💥 Unused

// ✅ Remove it — JSX works without importing React
function App() {
    return <div>Hello</div>;
}

Fix 5: Configure the Rule

// .eslintrc.json
{
    "rules": {
        "no-unused-vars": ["warn", {
            "argsIgnorePattern": "^_",
            "varsIgnorePattern": "^_",
            "destructuredArrayIgnorePattern": "^_"
        }]
    }
}

Related resources

• ESLint parsing error fix
• Prettier ESLint conflict fix