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:

1. Name the file with the.tsx extension;
2. 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