Module not found: Can't resolve 'fs' (when importing google from googleapis)

Question

I get the Module not found: Can't resolve 'fs' error when I try to import from googleapis.

//submitData.js
import { google } from "googleapis";
import keys from "../secrets.json";

export default async function submitData(data) {
  try {
    // prepare auth
    const auth = new google.auth.GoogleAuth({
      credentials: {
        client_email: keys.client_email,
        private_key: keys.private_key?.replace(/\\n/g, "\n"),
      },
      scopes: [
        "https://www.googleapis.com/auth/drive",
        "https://www.googleapis.com/auth/drive.file",
        "https://www.googleapis.com/auth/spreadsheets",
      ],
    });

    const sheets = google.sheets({ auth, version: "v4" });

    const sheetName = "DATA";

    const response = await sheets.spreadsheets.values.append({
      spreadsheetId: process.env.SHEET_ID,
      range: `${sheetName}!A3:E3`,
      valueInputOption: "USER_ENTERED",
      requestBody: {
        values: [data.name, data.date],
      },
    });

    return { status: 200, data: response.data };
  } catch (e) {
    return { status: 500, message: e.message ?? "Something went wrong" };
  }
}

This where I want to import submitData.js and to pass some data

//index.js
import submitData from "../../api/submitData";
...
const example = async (e) => {
    e.preventDefault();
    const data = {
      name: nameDisplay,
      date: day,
    };
    try {
      const response = await submitData(data);
      console.log(response);
      alert(response.data.tableRange);
    } catch (e) {
      console.error(e);
    }
...

Error:

Module not found: Can't resolve 'fs'

Import trace for requested module:
./node_modules/gcp-metadata/build/src/index.js
./node_modules/google-auth-library/build/src/auth/googleauth.js
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
./api/submitData.js
./pages/dashboard/index.js

As I browse the internet I find these solutions, however it does not solve my own.

//next.config.js
/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

// 1
// module.exports = {
//   webpack5: true,
//   webpack: (config) => {
//     config.resolve.fallback = {
//       fs: false,
//     };

//     return config;
//   },
// };

// 2
// module.exports = {
//   webpack: (config, { isServer }) => {
//     if (!isServer) {
//       config.resolve.fallback.fs = false;
//     }

//     return config;
//   },
// };

The commented parts are the solution that I tried, another error:

./node_modules/google-auth-library/build/src/auth/googleauth.js:17:0
Module not found: Can't resolve 'child_process'

Import trace for requested module:
./node_modules/google-auth-library/build/src/index.js
./node_modules/googleapis/build/src/index.js
./api/submitData.js
./pages/dashboard/index.js

score 0 · Answer 1 · answered Apr 27 '23 at 22:25

I took this answer: https://stackoverflow.com/a/69377128/14974752 and the information you provided. This solution worked for me (inside the next.config.js):

  webpack: (config) => {
    config.resolve.fallback = {
      fs: false,
      child_process: false,
      net: false,
      tls: false,
    };

    return config;
  },

Module not found: Can't resolve 'fs' (when importing google from googleapis)

1 Answers1