Bug: The no-unused-var error cleared by duplicating React Router import

[w3dd1e]

Environment

Node version: 21.5.0 (using 20.11.1 w/ nvm)
npm version: 10.2.4
Local ESLint version: 8.57.0
Global ESLint version: N/A
Operating System: macOS Sonoma 14.2.1
VSCode

What parser are you using?

Default (Espree)

What did you do?

Configuration

//eslintrc.cjs
root: true,
	env: { browser: true, es2020: true },
	extends: [
		'eslint:recommended',
		'plugin:react/recommended',
		'plugin:react/jsx-runtime',
		'plugin:react-hooks/recommended',
		'prettier',
	],
	ignorePatterns: ['dist', '.eslintrc.cjs'],
	parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
	settings: { react: { version: '18.2' } },
	plugins: ['react-refresh'],
	rules: {
		'react-refresh/only-export-components': [
			'warn',
			{ allowConstantExport: true },
		],
	},

//package.json

  "dependencies": {
    "@tanstack/react-query": "^5.22.2",
    "@tanstack/react-query-devtools": "^5.24.0",
    "babel-plugin-macros": "^3.1.0",
    "match-sorter": "^6.3.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1",
    "react-router-dom": "^6.22.1",
    "sort-by": "^0.0.2"
  },
  "devDependencies": {
    "@tanstack/eslint-plugin-query": "^5.20.1",
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.0.8"
  }

I'm working on a login component using React and React Router. I kept getting the no-unused-vars error and I couldn't figure out why. I wasn't seeing that I was missing a closing bracket in my handleLogin function. I tried different versions of Node using nvm, writing the function in the onSubmit attribute in various ways, and a few other things.

Finally, I gave up and I decided to give an AI extension a chance to identify the issue. It didn't figure out the problem, but it did duplicate my imports. Magically, that error was gone, which is obviously wrong. Duplicate imports shouldn't clear this error. I deleted the imports one at a time to see when the error would reappear. It only returned when the duplicate import { Link } from 'react-router-dom'; was removed.

import { Link } from 'react-router-dom';
import { useState } from 'react';
//other imported items

const LoginForm = () => {
	const handleLogin = async (e) => {
		e.preventDefault();
		 // other code 
	// !! missing closing bracket for handleLogin
	return(
		<form onSubmit={(e) => handleLogin(e)} method='post' id='login'>
		// other code
		<input  onClick={(e) => handleLogin(e)} type='submit' value='Sign In' className='button'/>
		</form>)
	);
};

What did you expect to happen?

I expected more errors with duplicate imports declared on the page.

What actually happened?

The no-unused-vars error was cleared.

Link to Minimal Reproducible Example

https://github.com/w3dd1e/groupomania-client

Participation

• I am willing to submit a pull request for this issue.

Additional comments

I'm still relatively new to this so, it's entirely possible this is the desired outcome. This is my first project with React.

I only realized that the closing bracket was missing from the function when I was submitting this bug, but I opted to submit the issue anyway, just in case. I figure you can close it, if there is nothing to do.

And, I'm happy to provide more info, as needed.

Thanks for all you do!

[Rec0iL99]

Hi @w3dd1e, I'm guessing you got a Parsing Error from ESLint since you had a syntax error (missing bracket). ESLint will not lint the file unless it has valid JS code (with no syntax errors).

// now this is valid JavaScript

import { Link } from 'react-router-dom';
import { useState } from 'react';
//other imported items

const LoginForm = () => {
	const handleLogin = async (e) => {
		e.preventDefault();
		 // other code 
        }
	return(
		<form onSubmit={(e) => handleLogin(e)} method='post' id='login'>
		// other code
		<input  onClick={(e) => handleLogin(e)} type='submit' value='Sign In' className='button'/>
		</form>
	);
};

The no-unused-vars rule is complaining here because Link, useState and LoginForm are defined but not used anywhere in the code.

You can fix the error on LoginForm by exporting the component.

export const LoginForm = () => { }

playground

[w3dd1e]

I'm sorry. I didn't do a very good job of explaining. I'll take note of this and try to make better reports in the future. I didn't copy my full code since I didn't think it was all relevant and it was a bit long, but I did link to the repo.

All of my imported hooks and components were being used elsewhere in the file. The no-unused-vars I was getting was on the handleLogin function which was already included in the form element. I didn't see that a bracket was missing, and I was getting frustrated so I used an AI to check the code. For some reason, the AI duplicated the imported components at the top which made the file look like this:

import { Link } from 'react-router-dom';
import { useState } from 'react';
//other imported items

import { Link } from 'react-router-dom';
import { useState } from 'react';
//other imported items

//...more code below this

Obviously being incorrect, when that happened I got the parsing error from ESLint and it cleared the no-unused-vars rule. I thought it was odd that doing that also resolved the first issue. But, it makes sense that ESLint wouldn't lint after the parsing error.

I did clear the error by adding the missing bracket.

Anyways, this is probably working as intended, but I wasn't sure at the time so I filed bug anyway. Thanks!