I’m working on this project made with Next.js, typescript and Auth0 for authentication.
I’ve made sure the variables from the useState are utilized, but the eslint fails everytime I run it. Is there a config issue here?
You can review my code below. I’ve shortened it for readability.
'use client';
import Image from 'next/image';
import { useState } from 'react';
import SignupForm from './SignupForm';
import { FormsToggleProps } from './Types';
const Login = ({ showLogin, setShowLogin }: FormsToggleProps) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});
if (res.ok) {
console.log('Login successful');
// Handle successful login
} else {
const data = await res.json();
setError(data.message || 'Login failed');
}
} catch (err) {
setError(err instanceof Error ? err.message : 'Something went wrong');
}
};
return (
<section className="bg-gray-50 dark:bg-gray-900">
<div className="w-full rounded-lg bg-white shadow sm:max-w-md md:mt-0 xl:p-0 dark:border dark:border-gray-700 dark:bg-gray-800">
<div className="space-y-4 p-6 sm:p-8 md:space-y-6">
{showLogin ? (
<>
<h1 className="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white">
Sign in to your account
</h1>
<form className="space-y-4 md:space-y-6" onSubmit={handleSubmit}>
<div>
<label
htmlFor="email"
className="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>
Your email
</label>
<input
type="email"
name="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
</div>
<div>
<label
htmlFor="password"
className="mb-2 block text-sm font-medium text-gray-900 dark:text-white"
>
Password
</label>
<input
type="password"
name="password"
id="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
{error && <p className="text-red-500">{error}</p>}
<button
type="submit"
className="focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800 w-full rounded-lg bg-blue-600 px-5 py-2.5 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4">
This is the eslintrc.json file with the current configuration.
//.eslintrc.json
{
"env": {
"browser": true,
"es2021": true
},
"extends": [
"eslint:recommended",
"plugin:@next/next/recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"rules": {
"prettier/prettier": ["error", { "endOfLine": "auto" }],
"react/react-in-jsx-scope": "off"
}
}
This is the persistent error. I have tried updating the code several times making sure the variables are utilized, but the console keeps bugging with the same error code:
$ git commit -m 'update Login'
✔ Backed up original state in git stash (63a4bd8)
✔ Hiding unstaged changes to partially staged files...
⚠ Running tasks for staged files...
❯ package.json — 1 file
❯ *.{js,jsx,ts,tsx} — 1 file
✖ eslint --fix [FAILED]
◼ prettier --write
↓ Skipped because of errors from tasks.
↓ Skipped because of errors from tasks.
✔ Reverting to original state because of errors...
✔ Cleaning up temporary files...
✖ eslint --fix:
8:17 error 'setEmail' is assigned a value but never used @typescript-eslint/no-unused-vars
9:20 error 'setPassword' is assigned a value but never used @typescript-eslint/no-unused-vars
10:10 error 'error' is assigned a value but never used @typescript-eslint/no-unused-vars
31:14 error 'error' is defined but never used @typescript-eslint/no-unused-vars
✖ 4 problems (4 errors, 0 warnings)
husky - pre-commit script failed (code 1)