React Refers To UMD Global, But The Current File Is A Module – How To Fix It?

The error “React refers to UMD global, but the current file is a module” related to your Typescript version. But don’t worry! It is also easy to fix. Let’s go into detail.

The reason for the error “React refers to UMD global, but the current file is a module”

Example of the error:

const Component = () => {
    return <>Hello World</>;
}

export default Component;

Error:

This error occurs when you use an earlier version of TypeScript, which is old enough to get the error. The old version required you to type a React statement every time it contained jsx to make your react recognize your file as a component.

Solutions for this error

Use import statement

Of course, the easiest solution is to use import React, which ReactJS recommends.

import React from "react";

const Component = () => {
    return <>Hello World</>;
}

export default Component;

Here I import React, so React will record this file as a component, and I won’t get any errors anymore.

Update your device

Make sure to update all these things. You won’t get any errors like this happening anymore.

• Typescript version 4.1 or later
• React and react-dom version 17 or later

These newer version will make importing React become optional.

You can update it by this command below.

To install the latest version of TypeScript:

npm install –g typescript@latest version

Or you can run:

npm update

This command will help you to update all packages, including TypeScript.

If you want to install a particular version of Typescript, you can run:

npm install –g typescript@typescript-version

Example:

npm install –global [email protected]

To update React and React-dom:

npm install react@latest react-dom@latest

Set the tsconfig.json file

Make sure your tsconfig.json file has this line:

"jsx": "react-jsx"

Or can it be

"jsx": "react-jsxdev"

Example:

{
	...
    "jsx": "react-jsx"
    ...
}

It relates to React JSX Factories. You can read more about React 17 JSX factories here.

Summary

In this tutorial, I have explained how to solve the error “React refers to UMD global, but the current file is a module”. You can update to the latest Typescript and React version, and that error will never bother you. If you have any questions or problems, please comment below. I will answer as possible. Thank you for reading!

Maybe you are interested:

• sh: react-scripts: command not found
• React Native build error: Undefined symbols for architecture x86_64
• react hook useeffect has a missing dependency error

Brent Johnson

Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.

---

Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm