score:3
<nav/>
is a valid html tag, so eslint thinks your jsx is referencing that html tag, and not the variable that holds the component you imported.
i recommend renaming your component to be nav
to remove all ambiguity.
score:0
three possibilities where you may have been wrong :-
- react shows this error because whenever someone declares a variable but didn't use it. in your case you didn't use this nav in your entire app.js file.
import nav from './nav'
- you have forgotten to start the
<nav>
function app() {
return (
<div classname="app">
<browserrouter>
<nav/>
<routes>
<route>
<route exact path="/" element={<home/>} />
<route exact path="/about" element={<about/>} />
<route exact path="/contact" component={<contact/>} />
</route>
</routes>
</browserrouter>
</div>
);
}
export default app;
- or custom components in react always start with a captial letter, not like this
<nav> <nav/>
but like this
<nav> <nav/>
score:1
from the docs,
a variable foo is considered to be used if any of the following are true:
it is called (foo()) or constructed (new foo())
it is read (var bar = foo)
it is passed into a function as an argument (dosomething(foo))
it is read inside of a function that is passed to another function (dosomething(function() { foo(); }))
so that, said, you maybe be missing some parsing so your valid jsx and reactjs syntax can be valid eslint syntax:
score:1
this happenes because your compiler does not recognize jsx syntax as being used.
so, you have to install:
npm install eslint-plugin-react --save-dev
then in your .eslintrc.json
file you should add react/jsx-uses-react
Source: stackoverflow.com
Related Query
- emotion-js on Create React App - 'jsx' is defined but never used
- 'Fragment' is defined but never used no-unused-vars warning with React app using ESLint
- React, warning 'css' is defined but never used no-unused-vars
- 'React' is defined but never used
- src\App.js 'nav' is defined but never used no-unused-vars
- PropType is defined but prop is never used for arrow function with single argument
- warning 'ScrollingHorizontally' is defined but never used no-unused-vars
- React app reports unused image, but it actually was used
- Compilation Error: is defined but never used no-unused-vars
- warning: it is defined but never used
- 'Product' s defined but never used in react?
- How to solve this Reactjs Eslint warning about 'index' is defined but never used
- 'API_KEY' is defined but never used 'CONTEXT_KEY' is assigned a value but never used
- Why is my header component defined but never used in my test?
- 'ImgOverlay' is defined but never used "React-Bootstrap"
- warning : is defined but never used
- 'Header' is defined but never used no-unused-vars
- 'useState' is defined but never used EVENTHOUGH I have used useState hook
- 'UserInput' is defined but never used no-unused-vars 'UserOutput' is defined but never used no-unused-vars
- PropTypes defined, but never used (ESLint, babel 6)
- I've been trying to create a react app but I keep getting this error: "npm ERR! cb() never called!"
- How to fix "Component is defined but never used" for eslint in react?
- Why ReactJs says "warning 'counter:' is defined but never used" but variable is used?
- ESLint: 'React' is defined but never used.(no-unused-vars) when using JSX pragma
- Stateless component in React and "Props is defined but never used" ESLint error
- Component is declared but never used
- Typescript: variable is assigned a value but never used, except it is used
- ESLint, Create React App and Unused Vars error
- es lint '' is assigned a value but never used' eventhough i have used it
- Kubernetes secrets passed in to React App container but not being used
More Query from same tag
- don't clear input on select using React-Select
- React extremely slow when iterating through JSON
- Using .map() to generate elements with Refs
- Getting the page title from a database query in Notion API?
- RTL await waitFor vs await findBy*
- Generate schema.json with GraphiQL or GraphQL endpoint
- React-select multiple drop downs onChange implementation
- How do we style the DOM that is created by the material-ui in ReactJS?
- Does React rerender child components if they become null via ternary operation?
- Deleting children and father view is not updating
- Only certain cross origin requests working using npm cors()
- Is this the correct way for storing a sub-collection?
- Property 'length' does not exist on type 'NumberSchema<number>
- Pass data from react component to proxy(node server)
- Passing values to Stripe Checkout from shopping cart
- How to sync firebase with react functional components?
- How to change state in recoil selector
- How leave from infinite rerender?
- How would you "redirect" to a login form using Next.js?
- React Material-UI useTheme palette not behaving as expected
- Building a React clock with hooks
- Invalid hook call. Hooks can only be called inside of the body of a function component. in shopify polaris
- Component duplicating when using keys
- Unable to change my input types values on edit page
- Difference between React.js and jQueryUI widget factory
- How to have multiple Providers or state available only for a part of the layout
- How to hide file icon when use showLine for antd v4.2.5
- AmplifyAuthenticator with react-router-dom
- Framer motion Animate Presence exit issue
- how to debug code with console.log when the code runs slow