Module not found: Can't resolve 'fs' on @google-cloud/storage

Question

Getting the Module not found: Can't resolve 'fs' error when trying to list out buckets from GCP Storage.

import { Storage } from '@google-cloud/storage';

const googleCloud = new Storage({
  keyFilename: '../../my-project-c1a44bf80be3.json',
  projectId: 'my-project',
});

googleCloud.getBuckets().then((x: any) => console.log(x));

my-project-c1a44bf80be3.json (Download from GCP) exists and is the project level

Error:

event - compiled successfully
event - build page: /
wait  - compiling...
error - ./node_modules/@google-cloud/storage/build/src/file.js:24:0
Module not found: Can't resolve 'fs'
null
Could not find files for / in .next/build-manifest.json
event - compiled successfully

The same error appears when using googleapis. However, instead of ./node_modules/@google-cloud/storage/build/src/file.js:24:0 it's in the google-auth-library module that comes with the googleapis.

Added using yarn.

Answer 1

This usually happens when you import or reference firebase-admin in the client side, check your code for wrong imports where you might be calling

import * as firebase from "firebase-admin";

instead of

import firebase from "firebase";

Answer 2

Posting the solution provided in the comments for visibility.

In your webpack configuration, you can indicate that certain modules like fs should be stubbed out; at which point you should be able to run this library client-side. For example:

node: {
        // Some libraries import Node modules but don't use them in the browser.
        // Tell Webpack to provide empty mocks for them so importing them works.
        ...config.node,
        fs: 'empty',
        child_process : 'empty',
        net : 'empty',
        tls: 'empty',
      }