chuckQu

V1

2022/07/30阅读:14主题:凝夜紫

React报错之Cannot find name

原文链接:https://bobbyhadz.com/blog/react-typescript-cannot-find-name

作者:Borislav Hadzhiev

正文从这开始~

.tsx扩展名

为了在React TypeScript中解决Cannot find name报错,我们需要在使用JSX文件时使用.tsx扩展名,在你的tsconfig.json文件中把jsx设置为react-jsx ,并确保为你的应用程序安装所有必要的@types包。

typescript-react-cannot-find-name.webp
typescript-react-cannot-find-name.webp

下面是在名为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>

  );
}

上述示例代码的问题在于,我们的文件扩展名为.ts,但是我们在里面却写的JSX代码。

这是不被允许的,因此为了在TS文件中使用JSX,我们必须:

  1. 将文件命名为.tsx扩展名;
  2. tsconfig.json中启用jsx选项。

确保编写JSX代码的所有文件拥有.tsx扩展名。

// App.tsx

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

  );
}

如果在更新文件扩展名为.tsx后,问题依然没有解决,请尝试重启IDE和开发服务器。

tsconfig.json配置文件

打开tsconfig.json文件,确保jsx选项设置为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/**/*"]
}

jsx选项设置为react-jsx ,它会导致编译器使用JSX,将.js文件改为_jsx调用

安装@types依赖包

另一个导致Cannot find name错误的原因是,我们没有安装必要的@types/

在项目的根目录下打开终端,运行下面的命令:

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

该命令安装了reactreact-domnodejest 的类型声明文件,同时也安装了typescript

如果依旧报错,请尝试删除node_modulespackage-lock.json(不是package.json)文件,重新运行npm install 并重启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

如果错误依旧存在,请确保重启IDE和开发服务器。VSCode经常出现故障,有时重新启动就能解决问题。

如果问题依旧存在,打开package.json 文件,确保下面的依赖包被包含在devDependencies对象中。

{
  // ... 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"
  }
}

可以手动添加上述依赖,并重新运行npm install

npm install

或者安装下面依赖的最新版:

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

分类:

前端

标签:

React.js

作者介绍

chuckQu
V1