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

It is a very common error in TypeScript and React. When this error occurs, your code editor might display the following error message 👇

Why this error occurs ?

There are two ways the error can occurs:

1. Using global variable directly: When you mistakenly use the global variable React directly in a TypeScript module file, instead of importing it correctly, you may encounter this error.

2. Mixing module systems: React supports two module systems: CommonJS and ES modules. CommonJS is commonly used in Node.js, while ES modules are the modern JavaScript standard. If your project has a combination of CommonJS and ES modules, or if you’re using an older version of React that relies on the Universal Module Definition (UMD) format, you may encounter this error.

How to fix the error ?

There are many ways to resolve the error:

1. To fix the error, you should import React as a module like this :

import React from 'react';

then you need to update the “TypeScript”, “React”, and “React-DOM” versions in your project.

To update the versions, Navigate to the root directory of your project using your terminal, and proceed to update the versions of TypeScript, React, and React-DOM by running these commands:

# 👇️ with npm
npm install react@latest react-dom@latest

npm install --save-dev typescript@latest

# ------------------------------

# 👇️ with yarn
yarn add react@latest react-dom@latest

yarn add typescript@latest --dev

Now make sure `jsx` is set to `react-jsx` in your `tsconfig.json` file like this:

Now you need to restart your IDE and development server.

If you are still facing the error, make sure that your IDE is properly configured to use the TypeScript version specified in your workspace. This ensures that the correct TypeScript compiler is being used.

To check that, press `CTRL + Shift + P` or (⌘ + Shift + P on Mac) to open the command palette.

Type “typescript version” and select “TypeScript: Select TypeScript Version…”.

Then click on “Use workspace version”. This should be your locally installed TypeScript version.

Now restart your IDE and development server. If this does not fix your issue move to the next solution.

2. Delete the node_modules and reinstall the dependencies :

If the error is not resolved, delete the `node_modules and `package-lock.json` files, then execute npm install again, and restart your IDE.

If you are on Windows, run the following commands in your terminal :

# for Windows
rd /s /q "node_modules"
del package-lock.json
del -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

If you are running macOS or Linux, use `bash` or `zsh` to execute the following commands :

#  for macOS and Linux
rm -rf node_modules
rm -f package-lock.json
rm -f yarn.lock

# 👇️ clean npm cache
npm cache clean --force

# 👇️ install packages
npm install

If the error remains, remember to restart both your IDE and development server. VSCode often encounters glitches that can be resolved by performing a reboot.

I hope this article helped you fix the error you were facing 🙏

ALSO SEE – WHAT IS THE DIFFERENCE BETWEEN `JS AND `JSX` ?