The error: “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts” is a common error that can show up in many ways. In this blog, we will go through some of the ways you can fix this issue. Read on.

What is “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”?

You may encounter the following issue in your reactjs project:

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

What causes error?

A common cause of this error is that you are not using the correct version of TypeScript. React 17’s new Jsx transform is not yet supported in TypeScript 4.0. Also it could be because you have ts-jest installed but tsconfig.json is not working

How to fix it?

Here are some of our solutions:

Approach 1: 

Using this code when set up ts-jest:

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

 Approach 2:

At least version 4.1 of typescript is required.

At least version 17 of react and react-dom.

tsconfig.json has to include a jsx compilerOption of react-jsx or react-jsxdev

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

Approach 3:

Import React into the Component file that’s giving you this error:

import React from 'react'

Approach 4: Using TypeScript 4.1

Because React 17’s new Jsx transform is not yet supported in TypeScript 4.0 but it’s ok in version 4.1

Conclusion

We hope you enjoyed our article about the error. With this knowledge, we know that you can fix your error: “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts” quickly by following these steps! If you still have any other questions about fixing this syntax error, please leave a comment below. Thank you for reading!