安装ApolloClient后SvelteKit项目构建失败，开发环境正常

问题分析 #

• npm run dev可正常运行，但终端会弹出buffer.Blob实验特性警告
• 本地或Vercel执行构建时，抛出ERR_UNSUPPORTED_DIR_IMPORT错误，提示不支持目录导入@apollo/client/core

解决方案 #

1. 修正导入语句（优先推荐） #

你当前直接指定具体文件路径的导入方式，会绕过Apollo Client的模块解析配置，导致构建时触发目录导入错误。改为官方推荐的顶层导入方式：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { setClient } from 'svelte-apollo';

这种导入方式会让Node.js依据@apollo/client的package.json配置，自动适配ES模块或CommonJS入口文件，从根源避免目录导入问题。

2. 配置Vite的SSR外部依赖 #

若修改导入语句后问题仍存在，可在vite.config.js中设置SSR不外部化Apollo相关依赖，让Vite正确处理模块打包：

import { sveltekit } from '@sveltejs/kit/vite';

/** @type {import('vite').UserConfig} */
const config = {
	plugins: [sveltekit()],
	ssr: {
		noExternal: ['@apollo/client', 'svelte-apollo']
	}
};

export default config;

3. 处理buffer.Blob警告 #

该警告源于Node.js环境中buffer.Blob属于实验特性，Apollo Client在SSR过程中会调用此特性。可通过两种方式解决：

• 升级Node.js至18+版本（该特性在Node.js 18中已稳定）
• 在src/hooks.server.js中添加Blob polyfill：

  import { Blob } from 'buffer';
  globalThis.Blob = Blob;
  

验证步骤 #

1. 执行npm run build检查是否仍有报错
2. 本地运行npm run preview确认生产环境正常工作
3. 重新部署至Vercel，验证构建流程是否成功

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