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

I faced the same problem but this guide was the solution in my case. As mentioned before, the problem is that the firebase-admin package is designed to run in a NodeJs environment and not on the client. Extending webpack.config.js or next.config.js with certain entries did not solve the problem for me.

I have noticed your are using NextJS. So the solution is to move the firebase-admin calls to the NextJS API which you can create within the /pages/api folder.

Here is a simple example to fetch user data from the client.

You need:

• /src/lib/firebase.ts: firebase initialization
• /src/pages/api/user.ts: NextJS API handler
• /src/components/xyz.tsx: component on client, which calls the API

// /src/lib/firebase.ts
import admin from "firebase-admin";
import { cert } from "firebase-admin/app";
import certConfig from "./firebase-adminsdk-config.json"

admin.initializeApp({
  credential: cert(certConfig)
});
console.log("Firebase initialized.");


export default admin;

// /src/pages/api/user.ts
import admin from 'lib/firebase'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const firebase = admin.firestore()
  const collection = firebase.collection('users')

  // get any data from requests body
  const { user } = req.body

  // perform your firebase collection call
  const data = await collection.get(user.id)

  // return data to client
  res.status(200)
  res.json({ 
      success: true, 
      result: data 
  });
    
  return res
}

On the client side then you just have to perform a GET to your own API

// /src/components/xyz.tsx
...
  const onLogin = async (user) => {
    const response = await fetch(`/api/users`, {
      method: "GET",
      body: JSON.stringify({ user }),
    });

    // data => { success: boolean, result: any }
    const data = await response.json(); 
    return data;
  }
...

Answer 3

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

Answer 4

The scenario you are describing is now being handled by Google. Although there is no ETA, the issue is being prioritized.