''React' refers to a UMD global, but the current file is a module

I updated my project to create react app 4.0, and I'm slowing moving over my files to TypeScript. I know with this new version you don't have to repetitively import React from 'react'. However, within all of my TS files where I'm not importing React I receive this error 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.ts(2686). I know I can fix it by importing React, but I thought this was no longer needed. Also, could someone explain the meaning of this error?

My basic TSX file

const Users = () => {
    return <>Teachers aka Users</>;
};

export default Users;

Solution 1:^[1]

This error message comes from TypeScript compiler. The React 17 new jsx transform is not currently supported in Typescript 4.0, and will be supported in 4.1.

TypeScript v4.1 Beta - React 17 JSX Factories

Solution 2:^[2]

Create React App supports the new JSX transformation out of the box in version 4 but if you are using a custom setup, the following is needed to remove the TypeScript error when writing jsx without import React from 'react':

typescript of at least version 4.1
react and react-dom of at least version 17
tsconfig.json must have a jsx compilerOption of react-jsx or react-jsxdev

example:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

TypeScript documentation for its support of React 17 JSX Factories can be found here

Solution 3:^[3]

Adding

import React from 'react'

fixes this issue

Solution 4:^[4]

I ran into this issue and finally realized that changing tsconfig.json doesn't work if you have ts-jest set up. Make sure if you have ts-jest set to:

module.exports = {
  ...
  globals: {
    ...
    "ts-jest": {
      ...
      tsconfig: {
        ...
        jsx: "react-jsx", // *** HERE ***
        ...
      },
    },
  },
  ...
};

Solution 5:^[5]

What Dan wrote is correct you can change TS config.json:

// tsconfig.json
{
  "compilerOptions": {
    ...
    "jsx": "react-jsx"
    ...
  },
}

or just import React inside the file Component that's giving you the error, by using:

import React from 'react'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Matt Peng
Solution 2
Solution 3	KARPOLAN
Solution 4	Tag Howard
Solution 5

''React' refers to a UMD global, but the current file is a module

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]