2

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

1 Answer 1

0

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;
  },

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.