[9.5.0] Error: Cannot find module '@grpc/grpc-js/package.json' in electron

[AviVahl]

[REQUIRED] Describe your environment

• Operating System version: Fedora 35
• Browser version: Firefox 64
• Firebase SDK version: 9.5.0
• Firebase Product: firestore

[REQUIRED] Describe the problem

Steps to reproduce:

Using firebase inside an electron app. I'm trying to upgrade from v8 to v9, and am encountering the following error:

Error: Cannot find module '@grpc/grpc-js/package.json'
Require stack:
- /home/avi/projects/<our-project-name>/node_modules/electron/dist/resources/electron.asar/renderer/init.js
    at Module._resolveFilename (:3000/internal/modules/cjs/loader.js:887)
    at Function.o._resolveFilename (:3000/electron/js2c/renderer_init.js:33)
    at Module._load (:3000/internal/modules/cjs/loader.js:732)
    at Function.f._load (:3000/electron/js2c/asar_bundle.js:5)
    at Function.o._load (:3000/electron/js2c/renderer_init.js:33)
    at Module.require (:3000/internal/modules/cjs/loader.js:959)
    at require (:3000/internal/modules/cjs/helpers.js:88)
    at Object.../../node_modules/@firebase/firestore/dist/index.node.cjs.js (:3000/vendors-node_modules_firebase_compat_firestore_dist_index_cjs_js.electron-renderer.js:15278)
    at __webpack_require__ (main.electron-renderer.js:7855)
    at Object.../../node_modules/@firebase/firestore-compat/dist/index.node.cjs.js (:3000/vendors-node_modules_firebase_compat_firestore_dist_index_cjs_js.electron-renderer.js:15)

Our setup bundles the library using webpack with electron-renderer target. I guess the attempt to dynamically create require breaks out of the bundling process.

Relevant Code:

The code that fails is:

// This is a hack fix for Node ES modules to use `require`.
// @ts-ignore To avoid using `--module es2020` flag.
const require$1 = module__default["default"].createRequire(new (require('url').URL)('file:' + __filename).href);
// eslint-disable-next-line @typescript-eslint/no-require-imports
const { version: grpcVersion } = require$1('@grpc/grpc-js/package.json');

Now, I realize this piece of code already came up in #5687
The chosen solution doesn't work for our use case, I believe.

[wu-hui]

First of all, Electron is not an officially supported platform, it is probably unsurprising that the SDK does not work there because we did not test on Electron.

That being said, I did ask someone who knows a bit about Electron. It seems you are targeting electron-renderer, which is a hybrid runtime for browser but with some node capability. You are using our Node bundle, so if that is not working, maybe try to use our browser bundle instead?

[AviVahl]

Thank you for the response. I realize electron compatibility is not usually being tested by libraries out there... v8 does work for our flow without any special handling, so I thought it might not be as big of a gap to ensure v9 is working as well.

I've tried using the browser bundles, but this proved more problematic. First, webpack didn't let me remap things like firebase/compat/app to firebase/firebase-app-compat (with or without .js), as these aren't exported in "exports". It didn't even let me require.resolve to get the absolute path due to the same reason.

I've tried working around by:

const firebaseRoot = path.dirname(require.resolve('firebase/package.json'));

module.exports: {
...
  resolve: {
     alias: {
       `'firebase/compat/app': path.join(firebaseRoot, 'firebase-app-compat.js')
   }
...

While the original issue (grpc) was resolved, I now faced with the compat bundles not really exporting a .default key anymore.

So I got type checking (typescript) passing, but at runtime I got errors about not being able to call initializeApp on undefined.
Our code is esm, but is transpiled down to commonjs (with es interop), and is later bundled by webpack.
we do a simple import firebase from 'firebase/compat/app'; in the code and later use it as: firebase.initializeApp(firebaseBrowserConfig)

I even tried mapping it to app/dist/index.esm.js and app/dist/index.mjs. both behaved the same. makes me wonder if this is happening because both files don't have any export default statement, so the code does not match the types.

I'm not sure what else I can try. These multi-module-format packages are supposed to be compatible with more cases, but in reality it's not simple to get the commonjs, esm, and (umd? iife?) bundles matching behavior and types. especially if one uses default export/import.

[AviVahl]

btw I've just verified that if I change:
const { version: grpcVersion } = require$1('@grpc/grpc-js/package.json');
to:
const { version: grpcVersion } = require('@grpc/grpc-js/package.json');
everything just works.

Is there any chance the "hack" (as the comment calls it) could only be applied to the esm versions? (where I'm guessing it's needed for native node esm support)

[hansdaapurba]

Similar issue arises on Google Cloud App Engine:

Error: Cannot find module '@grpc/grpc-js/package.json'

Require stack:

- /C:/development/projects/web/step/TestProject/node_modules/@firebase/firestore/dist/index.node.mjs

at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)

at Function.Module._load (internal/modules/cjs/loader.js:745:27)

at Module.require (internal/modules/cjs/loader.js:961:19)

at require (internal/modules/cjs/helpers.js:92:18)

at /workspace/dist/TestProject/server/main.js:1:6123890

at /workspace/dist/TestProject/server/main.js:1:6391995

at Object.<anonymous> (/workspace/dist/TestProject/server/main.js:1:6392227)

at Module._compile (internal/modules/cjs/loader.js:1072:14)

at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)

at Module.load (internal/modules/cjs/loader.js:937:32) {

code: 'MODULE_NOT_FOUND',

requireStack: [

'/C:/development/projects/web/step/TestProject/node_modules/@firebase/firestore/dist/index.node.mjs'

]

}

[maccman]

I'm seeing this issue on Vercel. Looks very urgent.

[maccman]

To be clear it looks like using the latest Firebase on Vercel is currently completely broken.

[ocavue]

I can reproduce this with a minimal repo: https://github.com/ocavue/firebase-vercel-function-require-issue

This repo is deployed to Vercel. Visit https://firebase-vercel-function-require-issue.vercel.app/oauth then you will see a 500 error page.

The server-side log is:

[GET] /oauth
19:59:20:46
2021-11-28T11:59:21.036Z	fff3ed5e-acd0-4a8c-84cf-4f068075d1ff	ERROR	Error: Cannot find module '@grpc/grpc-js/package.json'
Require stack:
- /vercel/path0/node_modules/@firebase/firestore/dist/index.node.mjs
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
    at Function.Module._load (internal/modules/cjs/loader.js:746:27)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:93:18)
    at /var/task/.next/server/chunks/21.js:14267:34 {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/vercel/path0/node_modules/@firebase/firestore/dist/index.node.mjs'
  ],
  page: '/oauth'
}
RequestId: fff3ed5e-acd0-4a8c-84cf-4f068075d1ff Error: Runtime exited with error: exit status 1
Runtime.ExitError

It seems that this error has something to do with the experimental: {esmExternals: 'loose'} in next.config.js

[mhamendes]

I have the exact same issue when deploying a nextjs app to Amplify. Only one page that uses firestore functions that have this issue and the problem is happening on the server-side rendering. Any news on that?

[fr-esco]

I have the same issue when deploying my server-side rendered Angular app to Google Cloud Run.

It works only if I use firebase@~9.1.0.

[hsubox76]

I think I have a fix in #5771 but need to test it.

I see the environments reported here that have this problem are:

• Electron
• Vercel
• Google Cloud Run
• Google App Engine
• NextJS on Amplify

It looks like all of those require cloud deployment to see the problem except Electron so I think I'm going to try the solution with Electron for faster iteration, unless anyone has a simpler and faster way to consistently reproduce the problem.

I see someone provided a Vercel repro so I can also look into how quickly I can deploy a copy to Vercel.

[michaelbramwell]

We had the same error last week in a containerized Angular SSR app we have just introduced Angularfire to (which is a wrapper of firebase-js-sdk). Ended up having to define @grpc/grpc-js in package.js and copy the lib into the container via the Dockerfile to stop this error from occurring.

[fanismahmalat]

I have this issue when deploying Next.js 12.0.2 with Firebase 9.2.0 and up on AWS Amplify. Lambda functions throw error on invocation: Cannot find module '@grpc/grpc-js/package.json'\nRequire stack:\n- /codebuild/output/src947501987/src/repo/node_modules/@firebase/firestore/dist/index.node.mjs.

Anyone found a working solution? Should I downgrade firebase back to v8? I really don't want to downgrade though..

UPDATE

I have the same issue when deploying my server-side rendered Angular app to Google Cloud Run.

It works only if I use firebase@~9.1.0.

Downgrading Firebase to 9.1.0 worked without breaking changes for me.