TypeScript: Missing "'React' is declared but its value is never read" error when using tsconfig.json jsx setting with react-jsx value

In React 17 you no longer need to import react when writing JSX

For those of you that use setups that don’t support the new JSX Transform, check your tsconfig.json. The jsx compiler option needs to be set to "react", not "react-jsx" as I had:

{
  "compilerOptions": {
    "jsx": "react",
  },
}

Here’s the info on all the available settings for this option and what they mean: https://www.typescriptlang.org/docs/handbook/jsx.html

Using React 17, if I take out the import I get this error instead: ‘React’ must be in scope when using JSX" So it doesn’t seam optional.

In React 17 you no longer need to import react when writing JSX

If I remove it. another error will occur.

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

Having the same problem in version 4.1.3.

error TS6133: 'React' is declared but its value is never read.

import React from "react"

export const TestComp = () => {
  return (
    <div>test</div>
  )
}

Remove import React in React 17 cause this error: ESLint: 'React' must be in scope when using JSX(react/react-in-jsx-scope)

@FOG5490 You need to disable this rule https://ru.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint.

For others that may stumble across this: If you need to use react16 with react-scripts 4 and typescript 4.1+ you may need to enable this env variable: DISABLE_NEW_JSX_TRANSFORM so that react-scripts doesn’t keep overwriting the tsconfig with the incompatible value. More deets: https://create-react-app.dev/docs/advanced-configuration/

For those of you that use setups that don’t support the new JSX Transform, check your tsconfig.json. The jsx compiler option needs to be set to "react", not "react-jsx" as I had:

{
  "compilerOptions": {
    "jsx": "react",
  },
}

Here’s the info on all the available settings for this option and what they mean: https://www.typescriptlang.org/docs/handbook/jsx.html

Thank you! That helped a lot!

In React 17 you no longer need to import react when writing JSX

We still use React 16. How can we get rid of this error?

In React 17 you no longer need to import react when writing JSX

If I remove it. another error will occur.

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686)

I’m still getting TS6133: 'React' is declared but its value is never read errors on TS 4.2.2, and if trying to remove the imports, getting the UMD global error as well. The fix should have been merged by 4.2.0 https://github.com/microsoft/TypeScript/pull/41905#issuecomment-752204827. Checking the git logs of v4.2.2, I can find the related commit 675cd4d7ce175dbd3875b7aaedacfc496435b816

eslint rule: ‘react/jsx-uses-react’: ‘off’, ‘react/react-in-jsx-scope’: ‘off’,

@doylemark , I am on version 18 and I have this error, lol

In React 17 you no longer need to import react when writing JSX

is it same for the v18?

@vkrol Thank you, I was about to update my comment also. I just found out that comment.

You only don’t need to import it for the tag factory; if you actually use it for other things (eg, types, base classes, hooks) you’ll still need to explicitly import it, like anything else.