React Native TS中WebView无法作为JSX组件的类型报错

在React Native + TypeScript项目中首次使用WebView组件时，抛出ts(2786)类型错误：

'WebView' cannot be used as a JSX component.
  Its instance type 'WebView<{ originWhitelist: string[]; source: { html: string; }; }>' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("C:/Users/louis/Downloads/UxTeams/UxTeamsProject/node_modules/@types/react-native/node_modules/@types/react/index").ReactNode'.
        Type '{}' is not assignable to type 'ReactNode'.ts(2786)

排查确认报错指向@types/react-native包内嵌套的node_modules/@types/react目录，项目中存在两份版本不一致的@types/react依赖。已在package.json中添加resolutions字段强制锁定@types/react版本为17.0.21，但问题未解决。
项目package.json依赖配置如下：

{
  "dependencies": {
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/native-stack": "^6.6.2",
    "@react-navigation/stack": "^6.2.1",
    "expo": "~45.0.0",
    "expo-av": "~11.2.3",
    "expo-constants": "~13.1.1",
    "expo-linear-gradient": "~11.3.0",
    "expo-status-bar": "~1.3.0",
    "expo-web-browser": "~10.2.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-gesture-handler": "~2.2.1",
    "react-native-reanimated": "^2.8.0",
    "react-native-safe-area-context": "4.2.4",
    "react-native-screens": "~3.11.1",
    "react-native-scroll-to-element": "^1.0.1",
    "react-native-web": "0.17.7",
    "react-native-webview": "^11.18.1",
    "react-scroll-to": "^3.0.0-beta.6"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@types/react": "~17.0.21",
    "@types/react-native": "^0.67.8",
    "typescript": "~4.3.5"
  },
  "resolutions": {
    "@types/react": "17.0.21"
  }
}

这个问题的核心诱因是resolutions是yarn包管理器专属的版本强制配置，如果你使用npm作为包管理工具，该配置不会生效，嵌套依赖中的重复@types/react不会被对齐版本，按以下步骤操作即可解决：

• 清理旧的依赖安装产物和锁文件
  执行对应命令删除node_modules目录和锁文件：

  # 使用npm的用户执行
  rm -rf node_modules package-lock.json
  # 使用yarn的用户执行
  rm -rf node_modules yarn.lock
  

• 配置对应包管理器的版本强制规则
  • npm用户：删除无效的resolutions配置，在package.json根层级添加overrides字段（npm v8及以上版本支持），强制所有层级依赖使用指定版本的@types/react：

    "overrides": {
      "@types/react": "17.0.21"
    }
    

  • yarn用户：保留现有resolutions配置即可，确认本地yarn版本为v1.x及以上
• 重新安装依赖

  # npm用户执行
  npm install
  # yarn用户执行
  yarn install
  

• 重启TypeScript服务
  在VS Code中按下快捷键Ctrl+Shift+P（macOS系统为Cmd+Shift+P），搜索并执行TypeScript: Restart TS Server，清除TS服务缓存的旧类型声明。

如果完成以上操作后仍存在报错，可以在项目根目录的tsconfig.json中添加路径映射配置，兜底强制所有模块引用同一份@types/react类型声明：

{
  "compilerOptions": {
    "paths": {
      "react": ["./node_modules/@types/react"]
    }
  }
}

注意：不要手动删除@types/react-native包下嵌套node_modules中的@types/react目录，后续执行依赖安装时该目录会自动重新生成，属于无效临时操作。

内容的提问来源于stack exchange，提问作者Louis