Vite项目引入@apollo/client报Uncaught SyntaxError: Unexpected string错误求助

问题分析 #

你遇到的Uncaught SyntaxError: Unexpected string错误，根源是@apollo/client的编译产物出现了语法无效代码（_globalThis$"development"），大概率是以下原因导致：

• 依赖安装缓存损坏，导致@apollo/client的构建文件不完整或出错
• @apollo/client版本与Vite、graphql版本不兼容
• Vite未正确注入process相关环境变量，触发了依赖内部的错误分支

解决方案 #

1. 清理依赖并重新安装 #

删除损坏的依赖文件和锁文件，重新拉取完整依赖：

• 删除项目根目录下的node_modules文件夹
• 删除package-lock.json（npm）或yarn.lock（yarn）
• 执行npm install或yarn install重新安装

2. 检查并调整依赖版本 #

• 确保graphql版本与@apollo/client兼容：@apollo/client@3.x要求graphql版本在14.0.0到16.x.x之间
• 尝试安装最新稳定版依赖：

  npm install @apollo/client@latest graphql@latest
  

  若最新版仍有问题，可降级到已知兼容Vite的版本（如3.8.0）：

  npm install @apollo/client@3.8.0 graphql@16.8.1
  

3. 配置Vite注入process环境变量 #

在vite.config.js中添加define配置，模拟Node.js的process环境变量，避免依赖内部因找不到变量触发错误：

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  }
})

4. 禁用Vite的依赖预构建（可选） #

若上述方法无效，可尝试关闭Vite的依赖预构建，让Vite直接处理原始依赖文件：

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    disabled: true
  }
})

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