在Vite中使用@apollo/client/core时出现React依赖未解析错误求助

问题原因 #

虽然你已经导入了@apollo/client/core（无React依赖的核心模块），但你使用的@vue/apollo-composable内部依赖的rehackt包会尝试导入React，Vite在解析依赖时找不到React包，因此抛出报错。

解决方案 #

方案1：安装React占位包 #

直接安装react和react-dom作为开发依赖，不需要实际使用它们，仅用于让Vite的依赖解析通过：

npm install react react-dom --save-dev

方案2：通过Vite配置映射空模块 #

如果不想安装React相关包，可以在Vite配置中把React的导入映射到空模块：

1. 安装空模块包：

npm install empty-module --save-dev

2. 修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'react': 'empty-module',
      'react-dom': 'empty-module'
    }
  }
})

验证 #

重启Vite开发服务器，报错应该会消失，你的Apollo Client可正常在Vue环境中使用。

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