React error Can't find name

The text starts here~

.tsx extension

In order to solve the Cannot find name error in React TypeScript, we need to use the JSX 5d416ca4f0b8e7cd94928bd80e7910d3--- extension when using the ---c843b03d25ed332bb586e5e87213db31--- file, put the .tsx extension in your tsconfig.json jsx is set to react-jsx and make sure to install all necessary @types packages for your application.

Below is an example of an error occurring 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 above sample code is that our file extension is .ts , but we have written JSX code inside.

This is not allowed, so in order to use JSX in a TS file we must:

1. Name the file .tsx extension;
2. Enable jsx option in tsconfig.json f475ee87e80ba97a8b26e8308a6e14b8---.

Make sure all files where you write JSX code have the .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 is not resolved after updating the file extension .tsx , please 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, changing the .js file to _jsx .

Install @types dependencies

Another cause of the Cannot find name error is that we did not install the necessary @types/ package .

Open a terminal in the root directory of the project 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

react , react-dom , node , jest的类型声明文件，同时也安装了typescript .

If the error still occurs, please try to delete node_modules and package-lock.json (not package.json ) files, and re-run npm install .

 # 👇️ 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, make sure to restart the IDE and development server. VSCode crashes frequently and sometimes a restart does the trick.

If the problem persists, open the package.json file and make sure the following dependencies 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 the above dependencies and re-run npm install .

 npm install

Or install the latest version of the following dependencies:

 # 👇️ 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