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

Question

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;

Answer 1

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

Answer 2

Adding

import React from 'react'

fixes this issue

Answer 3

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

Answer 4

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:

import React from 'react'

Answer 5

My issue here was TypeScript-related and similar, but not exactly the same, as those solutions already published herein.

What was wrong

I added nested directories with source code which were not included in my tsconfig.json.

The solution

Here's how I fixed it, simply adding additional .ts and .tsx paths to include, e.g.

// tsconfig.json
{
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
    "<path-to-your-source>.ts",
    "<path-to-your-source>.tsx",
  ],
}

My particular project is a Next.js project. Here's my full tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": [
      "esnext"
    ],
    "esModuleInterop": true,
    "target": "es5",
    "allowJs": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/**/*.ts",
    "**/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

The vast majority of the above tsconfig.json was generated via Next.js

Answer 6

For VSCode users, on macOS, simply closing and reopening the project fixed the issue for me.

Answer 7

Check your file tsconfig.json

"compilerOptions": {
    ...
    "baseUrl": "src",
    ...
    "jsx": "react-jsx",
    ...
 },

To reload the typescript server in VS Code:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

Answer 8

I fixed it using this:

{
  ...
  "compilerOptions": {
     ...
    "jsx": "react",
    "allowUmdGlobalAccess": true,
  }
}

Answer 9

In my case, it was unrelated to any of this.

I was using Visual Studio Code, and I opened the folder not at the root which had tsconfig.json file, but at one level inside at src folder.

I was getting the error: Parsing error: Cannot read file :C\MyProject\tsconfig.json.eslint

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

Reopening folder at project level resolved the issue. :\

Answer 10

In VS Code I had to restart the typescript server. I switched between git branches a lot and this error occurred unexpectedly in a file that had no changes. There were no other changes that could trigger this error. After reloading the error disappeared.

To reload the typescript server in VS Code:

Press Ctrl+Shift+P (Cmd+Shift+P on macOS) to open the Command Palette and type restart, then select the command "TypeScript: Restart TS server".

Answer 11

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 ***
        ...
      },
    },
  },
  ...
};

Answer 12

While this is an incredibly old post at this point, I've noticed multiple comments suggesting to use import React from 'react', including from recent posters - Which are incredibly unhelpful and miss the point of the question. Here are the instructions to get JSX transformation to work in a TS, Webpack, Babel environment and get rid of those pesky UMD global error messages.

1. Add @babel/core, @babel/preset-react and babel-loader to the project
2. Add a babel.config.ts with the following code

{
    "presets": [
      ["@babel/preset-react", {
        "runtime": "automatic" // This bit does the transformation
      }]
    ]
  }

3. Add babel loader rule to webpack module.rules, under ts-loader to load that babel config

{
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
     loader: "babel-loader",
   },
},

4. Add the following rule to TSConfig.ts "jsx": "react-jsx",
5. Add this (or variation of pointing to src folder) to TSConfig includes. Make sure you have excludes node_modules too

"include": [
   "./src/**/*.ts",
   "./src/**/*.tsx",
   "./src/**/*.jsx",
   "./src/**/*.js",
],

6. VERY IMPORTANT STEP FOR VSC-ers. Do ctrl+p in visual studio, type > TypeScript. Somewhere will be an option called TypeScript: Select TypeScript Version . Pick the TS version in node_modules, not the shitty out of date inbuilt VSC TS which should be condemned.
7. Restart VSC. You should be able to test JSX transformation is working with the following in a .tsx file.

import { FC } from "react";

const Component: FC = () => {
  return <></>;
};

export default Component;  

If you use another implementation of react i.e preact, you will also need to add the following rule to your TSConfig to get this to work "jsxImportSource": "preact",

Also if using a framework like Next, you don't need to do this as its inbuilt and in use by default.

Answer 13

Depending on the versions used in the project, this might be the required format:

import * as React from "react"

Answer 14

I was having this error when I mistakenly gave index.ts the component's name .

└── components/
    └── Dialog/
        ├── Dialog.tsx
        └── Dialog.ts // This needs to be index.ts

Changing the name back to index.ts solved it.

Answer 15

As pointed out in a comment by ppak10 unter Dan Barclay's answer, try first restarting Visual Studio Code

Answer 16

Ok my issue was with Docker Dev Containers in VSCode.

What I did to fix it:

1. Open up the command pallete with F1

2. Then look for: TypeScript: Select TypeScript Version...

3. And then select the Workspace version:

Answer 17

I had this happen when the file was in the root of the project instead of the src folder using Create React App.

Answer 18

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

Simple answer is to, import React.

import React from "react";

Answer 19

I had "'React' refers to a UMD global, but the current file is a module. Consider adding an import instead" all over my code base. I tried everything and so many random blog post on this subject. Adding an empty jsconfig.json was a temporary fix. After more hours than I'd like to admit of sifting through/playing with settings/configs, I had at some point turned this setting on without thinking. Search settings and shut if off or add this to your settings.json.

"js/ts.implicitProjectConfig.checkJs": false

Answer 20

How I simply solved this issue: by changing the tsconfig target to a more recent one. One that would be supported by most browsers and servers today, like ES2021.

--> Changed the target from ES5 to ES2021 - and that fixed it!

{
  "compilerOptions": {
    "target": "es2021",
  },
}

Which would make sense since we are using a newer syntax today

For information: here is how my tsconfig file looked like before fix :

    {
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Notice that I already had the "jsx": "react-jsx" option included in my file - which was (correctly) suggested by Dan, but still not sufficient to fix it

Answer 21

I'm using Next.js. In tsconfig.json,I changed "strict": true to false then errors disappeared.

"strict": false,