Vue3 TSX项目导入toRefs提示模块无导出成员错误如何解决？

问题根因 #

该错误不是Vue本身不存在toRefs方法，是TypeScript校验时读取到了错误的Vue类型声明入口，和依赖版本不匹配、测试版依赖的bug有关，可按以下步骤依次排查修复：

• 清理本地依赖缓存
  先删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件，再重新执行依赖安装命令：

  npm install
  # 或使用yarn
  yarn install
  

  排除本地缓存的Vue类型文件损坏导致的识别错误。

• 升级TypeScript版本
  你当前使用的TypeScript版本为~3.9.3，Vue3正式版的类型声明最低要求TypeScript版本在4.1以上，旧版本无法正确识别Vue3组合式API的类型导出。修改package.json中typescript的版本号：

  "typescript": "~4.3.5"
  

  修改后重新安装依赖即可。

• 补充tsconfig.json正确配置
  确认项目根目录的tsconfig.json中存在以下配置，保证TypeScript可以正确解析Vue的类型声明：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true
    }
  }
  

• 替换存在问题的测试版/占位依赖

  1. 你当前安装的vue-loader-v16是beta测试版本，存在类型识别bug，@vue/cli-service 4.5以上版本已经内置了Vue3单文件组件的解析能力，不需要额外安装该依赖，直接卸载即可：

  npm uninstall vue-loader-v16
  

  2. 你安装的fork-ts-checker-webpack-plugin-v5是安全占位包，没有实际的功能，需要替换为正式版的插件：

  npm uninstall fork-ts-checker-webpack-plugin-v5
  npm install fork-ts-checker-webpack-plugin@6 --save-dev
  

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