Module not found: Can't resolve 'fs' on #google-cloud/storage - node.js

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.