Prettier / ESLint / React

Question

Conflicting rules on TS / React import from a noob, but using Eslint / Prettier and getting an 'React' is declared but its value is never read. error, but if i remove it, 'React' must be in scope when using JSX error pops up. I can't work out why!

ReactDOM.render(<Hello greeting="Site under construction..." />, document.getElementById('root'));

import React from 'react';

export interface IProps {
    greeting: string;
}

function Hello({ greeting }: IProps) {
    return <div>{greeting}</div>;
}

export default Hello;

/Users/Jeremyrrsmith/Coding/GitHub/portfolio-site/src/components/Hello.tsx TypeScript error in /Users/Jeremyrrsmith/Coding/GitHub/portfolio-site/src/components/Hello.tsx(undefined,undefined):
'React' is declared but its value is never read. TS6133

But if I remove the import from Hello.tsx above

src/components/Hello.tsx
Line 6:12: 'React' must be in scope when using JSX react/react-in-jsx-scope

Search for the keywords to learn more about each error.

Answer 1

the last react version of react doesn t need the import. Use that one or fix your eslint which is the problem here