在SvelteKit中集成Smartsheet API Node SDK遇require未定义问题求助

核心问题分析 #

你遇到的require is not defined错误，是因为require是Node.js专属的CommonJS语法，浏览器环境（包括SvelteKit前端代码）不支持。更重要的是：绝对不能在前端代码中直接写入Smartsheet的accessToken——这会导致密钥泄露，任何人都能随意操作你的Smartsheet数据。所有和Smartsheet的交互必须放在SvelteKit的后端环境中执行。

正确实现步骤 #

1. 用环境变量存储accessToken

创建项目根目录下的.env文件（记得把这个文件添加到.gitignore里，避免提交到代码仓库）：

SMARTSHEET_ACCESS_TOKEN=ll35xxxxxxxxxxxxae05

2. 创建后端API路由（推荐方案）

在src/routes/api/smartsheet/目录下创建+server.js文件，这是SvelteKit的服务器端路由，运行在Node环境中，可以安全调用Smartsheet SDK：

import { createClient } from 'smartsheet';
import { SMARTSHEET_ACCESS_TOKEN } from '$env/static/private';

// 处理GET请求，返回Smartsheet数据
export async function GET() {
  const smartsheet = createClient({
    accessToken: SMARTSHEET_ACCESS_TOKEN
  });

  try {
    // 替换成你需要的API操作，这里以获取所有工作表为例
    const response = await smartsheet.sheets.listSheets();
    return new Response(JSON.stringify(response.data), {
      headers: { 'Content-Type': 'application/json' }
    });
  } catch (err) {
    console.error('Smartsheet API调用失败:', err);
    return new Response(JSON.stringify({ error: '数据获取失败' }), { status: 500 });
  }
}

3. 前端组件调用后端API

在需要展示数据的页面组件（比如src/routes/+page.svelte）中，通过fetch调用刚才创建的后端路由：

<script>
  let sheets = [];
  let errorMsg = null;

  async function fetchData() {
    try {
      const res = await fetch('/api/smartsheet');
      if (!res.ok) throw new Error('请求失败');
      sheets = await res.json();
    } catch (err) {
      errorMsg = err.message;
    }
  }

  // 页面加载时触发数据获取
  fetchData();
</script>

{#if errorMsg}
  <p style="color: red;">{errorMsg}</p>
{:else if sheets.length}
  <h3>我的Smartsheet工作表</h3>
  <ul>
    {#each sheets as sheet}
      <li>{sheet.name}</li>
    {/each}
  </ul>
{:else}
  <p>加载中...</p>
{/if}

可选方案：用Server Load函数预取数据 #

如果需要在页面渲染前就获取数据（支持预渲染/服务器端渲染），可以创建src/routes/+page.server.js文件：

import { createClient } from 'smartsheet';
import { SMARTSHEET_ACCESS_TOKEN } from '$env/static/private';

export async function load() {
  const smartsheet = createClient({ accessToken: SMARTSHEET_ACCESS_TOKEN });
  
  try {
    const res = await smartsheet.sheets.listSheets();
    return { sheets: res.data };
  } catch (err) {
    return { error: '数据加载失败' };
  }
}

然后在+page.svelte中直接使用预取的数据：

<script>
  export let data;
</script>

{#if data.error}
  <p style="color: red;">{data.error}</p>
{:else if data.sheets.length}
  <h3>我的Smartsheet工作表</h3>
  <ul>
    {#each data.sheets as sheet}
      <li>{sheet.name}</li>
    {/each}
  </ul>
{:else}
  <p>暂无工作表</p>
{/if}

关键注意事项 #

• 始终用环境变量管理敏感密钥，不要硬编码在代码中。
• Smartsheet Node SDK只能在Node环境（SvelteKit的server路由/load函数）中使用，前端代码仅负责调用后端接口获取数据。
• SvelteKit默认支持ES模块，用import替代require语法。

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