Next.js调用googleapis时出现Module not found: Can't resolve 'fs'错误，如何在客户端组件中实现Google Calendar事件删除功能

这个报错的根源很直接：googleapis库是为Node.js环境开发的，它依赖fs这类Node.js内置模块，但浏览器客户端环境根本没有这些模块，所以直接在客户端组件里使用这个库肯定会出问题。

解决思路也很清晰：把Google Calendar的删除逻辑放在服务器端（比如Next.js的API路由），客户端组件只需要通过HTTP请求调用这个API，把需要的参数（比如你从客户端state里拿到的accessToken和eventId）传过去就行。这样既避开了浏览器环境的限制，又能正常使用客户端的状态数据。

下面是具体的实现步骤：

1. 把删除逻辑迁移到API路由（服务器端） #

在你的Next.js项目里创建一个新的API路由文件，比如app/api/calendar/delete/route.js，把原来的删除逻辑调整成处理POST请求的形式：

import { google } from 'googleapis';

export async function POST(request) {
  try {
    // 从请求体里获取客户端传过来的参数
    const { accessToken, eventId } = await request.json();

    const SCOPES = [
      "https://www.googleapis.com/auth/calendar.readonly",
      "https://www.googleapis.com/auth/calendar",
      "https://www.googleapis.com/auth/calendar.events.readonly",
      "https://www.googleapis.com/auth/calendar.events",
    ];

    // 初始化OAuth2客户端
    const oAuth2Client = new google.auth.OAuth2({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
      redirectUri: process.env.GOOGLE_REDIRECT,
      scopes: SCOPES,
    });

    // 设置用户的访问令牌
    oAuth2Client.setCredentials({ access_token: accessToken });

    const calendar = google.calendar({
      version: "v3",
      auth: oAuth2Client,
    });

    // 执行删除事件操作
    await calendar.events.delete({
      calendarId: "primary",
      eventId: eventId,
    });

    // 返回成功响应
    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch (error) {
    console.error("Error deleting event:", error);
    // 返回错误响应
    return new Response(JSON.stringify({ error: "删除事件失败，请稍后重试" }), { status: 500 });
  }
}

2. 在客户端组件中调用这个API #

在你的客户端组件里，通过fetch调用上面的API，把从state里拿到的accessToken和eventId传过去。这里给你一个简单的示例：

'use client';

import { useState } from 'react';

export default function DeleteEventButton({ eventId, accessToken }) {
  const [isLoading, setIsLoading] = useState(false);
  const [errorMsg, setErrorMsg] = useState('');

  const handleDeleteEvent = async () => {
    setIsLoading(true);
    setErrorMsg('');

    try {
      const response = await fetch('/api/calendar/delete', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ accessToken, eventId }),
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || '删除失败');
      }

      // 删除成功后的逻辑，比如刷新事件列表、提示用户
      alert('事件已成功删除！');
      // 这里可以触发父组件的刷新逻辑，比如调用props里的回调函数
    } catch (err) {
      setErrorMsg(err.message);
      console.error('删除事件出错:', err);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div>
      <button 
        onClick={handleDeleteEvent} 
        disabled={isLoading}
        style={{ cursor: isLoading ? 'not-allowed' : 'pointer' }}
      >
        {isLoading ? '删除中...' : '删除事件'}
      </button>
      {errorMsg && <p style={{ color: 'red', marginTop: '8px' }}>{errorMsg}</p>}
    </div>
  );
}

为什么这个方案可行？ #

• API路由运行在Node.js环境中，拥有fs等内置模块，所以googleapis库能正常工作；
• 客户端组件只负责发送HTTP请求，不需要直接依赖googleapis，完美避开了浏览器环境的限制；
• 你可以轻松从客户端state里获取accessToken和eventId，然后通过请求体传给API，完全满足你的需求。

额外注意事项 #

• 确保你的环境变量（GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET等）已经正确配置在Next.js项目中；
• 要处理accessToken过期的情况，如果API返回令牌过期的错误，你需要引导用户重新授权；
• 可以根据实际需求优化错误处理和用户提示，比如用Toast代替alert，提升用户体验。

备注：内容来源于stack exchange，提问作者vuki