Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

eslint complains all react components as unused

See original GitHub issue

If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.

Can you reproduce the problem with latest npm?

Yes

Description

What are you reporting? If I run ./node_modules/.bin/eslint from the root directory of a project created with create-react-app I get a: error 'Link' is defined but never used no-unused-vars error even when I have used the Link tag. The same happens for any react component too.

Expected behavior

If a react component is used, it should not be showing the eslint error at all.

Actual behavior

eslint reports an error

Environment

Run these commands in the project folder and fill in their results:

npm ls react-scripts (if you haven’t ejected): └── react-scripts@0.9.2
node -v: v6.10.0
npm -v: 4.4.4 Then, specify:
Operating system: Mac OS X

Issue Analytics

State:
Created 6 years ago
Comments:9 (4 by maintainers)

Top GitHub Comments

1reaction

gaearoncommented, Mar 30, 2017

Oh now I get it. Running ESLint from console is not something we support out of the box.

The linting is integrated right into npm start and npm run build. This is where you should see the lint errors. You don’t need to run eslint by yourself, as it won’t work.

If you absolutely must run it for some reason (e.g. for an IDE integration), add { "extends": "react-app" } as .eslintrc to your project. That should be enough. This is described in the User Guide.

0reactions

tscizzlecommented, Nov 3, 2018

Can confirm, also worked for Sublime Text 😄

Top Results From Across the Web

ESLint with React gives `no-unused-vars` errors

At least in my case, the issue was that I am importing React in every file and my linter is complaining if I...

eslint-plugin-unused-imports - npm

Find and remove unused es6 module imports. It works by splitting up the no-unused-vars rule depending on it being an import statement in...

no-unused-vars - ESLint - Pluggable JavaScript Linter

A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.

Common React TypeScript ESLint / Lint Errors & Warning ...

The lint message: Component should be written as a pure function (react prefer/stateless function). This goes to the core of React. FP (Functional...

React Native development tools - Part 1: Linting tools - Pusher

eslint -config-airbnb - allows you to use Airbnb's JavaScript style guide's ESLint configuration file. The default configuration has rules for React, plugin ...