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.
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 (
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 🙏