Module not found: Can't resolve 'fs' in Next.js with googleapis

Question

I have this piece of code in app/api/calendar.js and the purpose of this is to delete single event from Google Calendar

export async function deleteEventFromCalendar(accessToken, eventId) {
  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",
  ];

  // Create an instance of the OAuth2 client object with scopes
  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,
  });

  try {
    return await calendar.events.delete({
      calendarId: "primary",
      eventId: eventId,
    });
  } catch (error) {
    console.error("Error deleting event:", error);
    throw error;
  }
}

The problem is when i try to call this from Client side component I get an error saying error ./node_modules/gcp-metadata/build/src/gcp-residency.js:19:0 Module not found: Can't resolve 'fs'

Is there a way to deleteEventFromCalendar in Client side components

I tried to move my code to Sever side components but almost always I need something from state(and that is Client side component then)

Answer 1

You can not use code from api route on client side. You need to put this piece of code in a separate file. You may import it in api routes as well as client side. However, code written inside api routes can not be imported from client side component.