React Typescript "Cannot find name" error [Solved]

avatar

Borislav Hadzhiev

Last updated: Apr 8, 2022

banner

Photo from Unsplash

React Typescript "Cannot find name" error [Solved] #

To solve the "Cannot find name" error in React typescript, use a .tsx extension for the files in which you use JSX, set jsx to react-jsx in your tsconfig.json file and make sure to install all of the necessary @types packages for your application.

typescript react cannot find name

Here is an example of how the error occurs in a file called App.ts.

App.ts
export default function App() { // ⛔️ Cannot find name 'div'.ts(2304) return ( <div> <input type="text" id="message" value="Initial value" /> {/* Cannot find name 'button'.ts(2304) */} <button>Click</button> </div> ); }
The issue in the code sample is that our file has a .ts extension and we're writing JSX code in it.

This is not allowed, because in order for us to use JSX in a TypeScript file, we have to:

  1. Name our files with a .tsx extension
  2. Enable the jsx option in our tsconfig.json file

Make sure all of the files in which you write JSX code have a .tsx extension.

App.tsx
export default function App() { return ( <div> <input type="text" id="message" value="Initial value" /> <button>Click</button> </div> ); }

If the error is not resolved after updating the file's extension to .tsx, try restarting your IDE and development server.

Open your tsconfig.json file and make sure the jsx option is set to react-jsx.

tsconfig.json
{ "compilerOptions": { "jsx": "react-jsx", // 👈️ make sure you have this "target": "es6", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true }, "include": ["src/**/*"] }

When the jsx option is set to react-jsx, it causes the compiler to emit .js files with the JSX changed to _jsx calls.

Make sure to restart your development server and your IDE if necessary. Your dev server won't pick up the changes until you stop it and re-run the npm start command.

Another cause of the "Cannot find name" error in React TypeScript is when we don't install the necessary @types/ packages.

Open your terminal in the root directory of your project (where your package.json file is) and run the following command:

shell
# 👇️ with NPM npm install --save-dev @types/react @types/react-dom @types/node @types/jest typescript # ------------------------------------------------------ # 👇️ with YARN yarn add @types/react @types/react-dom @types/node @types/jest typescript --dev

The command installs the typings for react, react-dom, node, jest and also installs the typescript package.

If you still get the error, try to delete your node_modules and package-lock.json (not package.json) files, re-run npm install and restart your IDE.

shell
# 👇️ delete node_modules and package-lock.json rm -rf node_modules rm -f package-lock.json # 👇️ clean npm cache npm cache clean --force npm install
Make sure to restart your IDE and dev server if the error persists. VSCode often glitches and a reboot solves things sometimes.

If you're still getting the "Cannot find name" error, open your package.json file and make sure it contains the following packages in the devDependencies object.

package.json
{ // ... rest "devDependencies": { "@types/react": "^17.0.44", "@types/react-dom": "^17.0.15", "@types/jest": "^27.4.1", "@types/node": "^17.0.23", "typescript": "^4.6.3" } }

You can try to manually add the lines and re-run npm install.

shell
npm install

Or install the latest version of the packages:

shell
# 👇️ with NPM npm install --save-dev @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest # ------------------------------------------------------ # 👇️ with YARN yarn add @types/react@latest @types/react-dom@latest @types/node@latest @types/jest@latest typescript@latest --dev

Conclusion #

To solve the "Cannot find name" error in React typescript, use a .tsx extension for the files in which you use JSX, set jsx to react-jsx in your tsconfig.json file and make sure to install all of the necessary @types packages for your application.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.