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

React is a JavaScript library, which is quite famous among programmers because of the simplicity of setting up the front end. Newbies are also designing JavaScript programs using react to become a pro in programming. While working on the react project, you import the files to TypeScript, and that’s when you may experience the error warning “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”.

When the error warning pops up, you don’t need to worry as we are here to help you. We have top-notch tips and ways to help you resolve the error. We discuss everything in a simpler way so that you understand easily. Let’s discuss how the error occurs

How do you get the error message?

When working on the TypeScript project, you end up with the following error

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

Have a look at the solutions to fix it

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

You get the error warning because of the incorrect TypeScript version or the ts.config.json is not properly working. We are going to shed light on a few fixes.

Solution 1 – The tsconfig.json setup

You need to have at least a 4.1 TypeScript version along with at least 17 version of react and react-dom. Setup the tsconfig.json with either react-jsxdev or react-jsx while it must have a jsx. Have a look at the code

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

Solution 2 – Go for TypeScript 4.1

The error comes up because of the versions issue. As you are importing files from react to TypreScript, you need to know that react 17 version has a new JSX transform, which is not supported by the TypeScript 4.0 version.

Use TypeScript version 4.1. It resolves the error.

Solution 3 – Set up the ts-jest

This is another solution to fix the error “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”.  Use the below code for setting up ts-jest

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

Solution 4 – Importing react

The error shows up when you try to import react into the component file. Follow the below code

import React from 'react'

It makes the error message go away.

Conclusion

Different solutions are highlighted in this post to fix the error “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”. We leave the decision to you to choose the solution that fits best for your project.

I hope you find it helpful!

Reference Source: https://www.faqcode4u.com/faq/243521/react-refers-to-a-umd-global-but-the-current-file-is-a-module

https://angularfixing.com/react-refers-to-a-umd-global-but-the-current-file-is-a-module/

Leave a Reply

Your email address will not be published. Required fields are marked *