Text starts here~
.tsx extension
In order to resolve Cannot find name errors in React TypeScript, we need to use the.tsx extension when using JSX files, in your tsconfig. Set JSX to react-jsx in the JSON file and make sure that all necessary @types packages are installed for your application.
Below is an example of an error in a file named 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 problem with the example code above is that our file has a.ts extension, but the JSX code we write inside.
This is not allowed, so in order to use JSX in TS files, we must:
- Name the file with the.tsx extension;
- Enable the jsx option in tsconfig.json.
Make sure all files that 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 problem remains unresolved after updating the file extension.tsx, try restarting the IDE and development server.
tsconfig.json configuration file
Open the tsconfig.json file and make sure the JSX option is set to react-jsx.
{ "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 use JSX and change the.js file to _ JSX call.
Install @types dependent package
Another reason for the Cannot find name error is that we did not install the necessary @types/packages.
Open the terminal in the project's root directory and run the following command:
# 👇️ 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
This command installs the type declaration files for react, react-dom, node, jest, as well as typescript.
If the error persists, try deleting node_modules and package-lock.json (not package.json) files, rerun npm install and restart IDE.
# 👇️ 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
If the error persists, be sure to restart the IDE and development server. VSCode often fails, sometimes restarting will solve the problem.
If the problem persists, open the package.json file, make sure the following dependent packages are included in the devDependencies object.
{ // ... 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 manually add these dependencies and rerun npm install.
npm install
Or install the latest version depending on:
# 👇️ 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