Vue Vite集成CosmicJS时遭遇process未定义错误求助

问题背景 #

开发博客SPA时选用CosmicJS替代WordPress以降低请求延迟，但在Vite项目中使用官方SDK时，即使将require改为import，仍触发ReferenceError: process is not defined错误，错误栈指向CosmicJS内部依赖的process变量。当前使用的请求代码如下：

import Cosmic from "cosmicjs"

const api = Cosmic();

const bucket = api.bucket({
  slug: "你的bucket-slug",
  read_key: "你的read-key",
});

const data = await bucket.objects
  .find({
    type: "posts",
  })
  .props("title,slug,metadata")
  .limit(10);

console.log(data)

解决方案 #

方案1：通过Vite的define配置注入process变量

Vite默认在浏览器环境中不提供Node.js的process变量，可通过vite.config.js的define选项模拟该变量：

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    'process.env': {} // 注入空对象以消除未定义错误
  }
})

此方法简单直接，适合仅需消除process未定义错误的场景。

方案2：直接调用CosmicJS REST API（无需SDK）

绕开官方SDK，直接使用浏览器原生fetch调用Cosmic的REST API，避免模块兼容问题：

const fetchCosmicPosts = async () => {
  const bucketSlug = "你的bucket-slug";
  const readKey = "你的read-key";
  const apiUrl = `https://api.cosmicjs.com/v3/buckets/${bucketSlug}/objects`;
  
  const params = new URLSearchParams({
    read_key: readKey,
    type: "posts",
    props: "title,slug,metadata",
    limit: 10
  });

  const response = await fetch(`${apiUrl}?${params}`);
  const result = await response.json();
  
  console.log(result.objects); // 返回的文章数据在objects字段中
};

// 调用获取文章
fetchCosmicPosts();

该方法无需依赖第三方SDK，更适配浏览器环境，同时也能满足获取文章的需求。

方案3：使用polyfill插件补全Node.js内置模块

若坚持使用官方SDK，可安装vite-plugin-node-polyfills来补全Vite缺失的Node.js内置模块：

1. 安装插件：

npm install vite-plugin-node-polyfills --save-dev

2. 在vite.config.js中配置：

import { defineConfig } from 'vite'
import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineConfig({
  plugins: [
    nodePolyfills({
      include: ['process'] // 仅补全process模块，减少打包体积
    })
  ]
})

配置完成后重新启动Vite开发服务，即可正常使用CosmicJS SDK。

额外建议 #

• 检查CosmicJS SDK版本，尝试升级至最新版，新版本可能已优化浏览器环境的兼容性；
• 若SDK提供浏览器专属入口，可尝试导入import Cosmic from 'cosmicjs/browser'（需查阅官方文档确认）。

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