How To Fix “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”?
Are you having problems with the issue “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts“? How to fix it? In today’s article, I will provide solutions for you to solve the issues. Please follow the below steps to get the problem resolved now
How did “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts” occur?
‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts
When you work with ReactJS, you may get the issue ‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts. Don’t worry, we are here to provide you solutions in order to resolve your problem.
How to fix “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts”?
To Solve “React” refers to a UMD global but the current file in question is a module. Try adding an import instead.ts This error message is from TypeScript compiler. Typescript 4.0 does not support the React 17 new Jsx transform. Typescript 4.1 will.
Solution 1
-
Version 4.1 or less of
typescript
-
react
orreact-dom
for at least version 17 -
tsconfig.json
must include ajsx
compilerOption,react-jsx
, orreact-jsxdev
example:
// tsconfig.json
{
"compilerOptions": {
...
"jsx": "react-jsx"
...
},
}
Solution 2
This error message is from TypeScript compiler. Typescript 4.0 does not support the React 17 new Jsx transform. Typescript 4.1 will.
Final words
The above are useful solutions that can help you fix “‘React’ refers to a UMD global, but the current file is a module. Consider adding an import instead.ts” problem, if you can’t solve it well. Please leave a message.