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

[vkrol]

TypeScript Version: 4.2.0-dev.20201208

Search Terms:
React, JSX transform, noUnusedLocals, missing error.

Code

import React from "react";

function Bar() {
  return <div />;
}

export function Foo() {
  return <Bar />;
}

Expected behavior:

index.tsx:1:1 - error TS6133: 'React' is declared but its value is never read.

Actual behavior:
No error.

Additional info:
The compiler throws error correctly if JSX does not use custom components. For example:

import React from "react";

export function Foo() {
  return <div />;
}

Playground Link: N/A (Playground doesn't support "jsx": "react-jsx" tsconfig.json setting.

Related Issues: N/A

Minimal reproducible example: https://github.com/vkrol/typescript-missing-nounusedlocals-error-for-react-with-new-jsx-transform

[ptorsson]

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>
  )
}

[doylemark]

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

[chj-damon]

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)

[weswigham]

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.

[jethrolarson]

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/

[AdrienLemaire]

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 #41905 (comment).
Checking the git logs of v4.2.2, I can find the related commit 675cd4d

[gligoran]

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?

[ripter]

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.

[FOG5490]

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

[vkrol]

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

[FOG5490]

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

[gligoran]

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

[idelice]

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

Thanks

[sirmong]

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!

[hariacharya80]

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

is it same for the v18?

[f1am3d]

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

[hariacharya80]

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

Am also facing the same issue

[ygqygq2]

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