Nuxt3(Vite)集成Apollo Client报错：无法解析react，如何标记为外部依赖？

问题原因 #

你直接安装了完整的@apollo/client包，其中包含React相关的钩子模块（如useApolloClient、useMutation），这些模块依赖react，但Nuxt3基于Vue生态，未安装React相关包，导致Vite打包时无法解析react依赖。

解决方案 #

方案1：将react标记为外部依赖 #

在Nuxt3的配置文件nuxt.config.ts中，修改Vite的SSR配置，把react和react-dom标记为外部依赖，让Vite跳过对它们的打包处理：

export default defineNuxtConfig({
  vite: {
    ssr: {
      external: ['react', 'react-dom']
    }
  }
})

配置完成后重新执行yarn dev，即可消除找不到react的错误。

方案2：使用Nuxt官方Apollo模块（推荐） #

直接使用适配Nuxt3的@nuxtjs/apollo模块，它会自动处理Apollo Client的依赖适配，避免引入不必要的React相关代码：

1. 安装依赖：

yarn add @nuxtjs/apollo graphql

2. 在nuxt.config.ts中配置模块：

export default defineNuxtConfig({
  modules: ['@nuxtjs/apollo'],
  apollo: {
    clients: {
      default: {
        httpEndpoint: '替换为你的GraphQL API地址'
      }
    }
  }
})

这种方式更符合Nuxt3的生态规范，后续也能获得更好的维护支持。

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