'The requested module '@grpc/grpc-js' is expected to be of type CommonJS' Getting issue while deploying next js application by gcp CICD pipeline.

[krishna-fenixwork]

Hey, I'm building the next js application. Recently, while deploying my project through the GCP CICD pipeline, I'm getting this error -

`
info - Checking validity of types...
warn - No ESLint configuration detected. Run next lint to begin setup
info - Creating an optimized production build...
info - Compiled successfully
info - Collecting page data...

Build error occurred
file:///workspace/node_modules/@firebase/firestore/dist/index.node.mjs:7
import { credentials, loadPackageDefinition, Metadata } from '@grpc/grpc-js';
^^^^^^^^
SyntaxError: The requested module '@grpc/grpc-js' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from '@grpc/grpc-js';
const { credentials, loadPackageDefinition, Metadata } = pkg;
at ModuleJob._instantiate (internal/modules/esm/module_job.js:98:21)
at async ModuleJob.run (internal/modules/esm/module_job.js:137:5)
at async Loader.import (internal/modules/esm/loader.js:165:24) {
type: 'SyntaxError'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
`

I couldn't understand what causing the issue. I tried downgrading the version of firebase and firebase-functions too, but It didn't seem to work. Can anyone help me with that?

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[jbalidiong]

Hi @krishna-fenixwork, thanks for reaching out. Would you mind sharing more specific details:

• Version numbers of Firebase/Nextjs/etc
• A small code snippet demonstrating the issue

[schmidt-sebastian]

@hsubox76 Christina - should we fix our imports?

[hsubox76]

Looking around, it seems like if we aren't able to change grpc-js then we should probably follow the pattern given in the error message.

[krishna-fenixwork]

Hey, @jbalidiong These are the packages that I'm using -

"next": "^12.0.7", "firebase": "^9.4.1", "firebase-admin": "^10.0.0", "firebase-functions": "^3.16.0",

I've also tried to upgrade them to their latest version but the issue still persists so I downgrade them again to these versions. I've my firebase configuration file where I initialized firebase and firestore like this -

import { initializeApp } from 'firebase/app';
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

const firebase = initializeApp(FIREBASE_CONFIG)
export const db = getFirestore();
export const storage = getStorage(firebase);

and then I imported this db and storage to my required components.

import { db, storage } from '../../../firebase/config_s';
import { collection, doc, addDoc, getDoc, serverTimestamp, updateDoc, onSnapshot } from 'firebase/firestore'; 

These imports are defined in my 3 component files in which I just used its functions for my required functionality. And as I said, I'm just using this command to deploy my function.

firebase deploy --only functions:nextServer --debug

this is the function defination for nextServer function -

const { https } = require('firebase-functions');
const { default: next } = require('next');

const isDev = process.env.NODE_ENV !== 'production';

const server = next({
    dev: isDev,
    conf: { 
        distDir: '.next',
        images: {            
            domains: ['storage.googleapis.com', 'firebasestorage.googleapis.com'],
        }
    },
});

const nextjsHandle = server.getRequestHandler();

exports.nextServer = https.onRequest((req, res) => {
    return server.prepare().then(() => nextjsHandle(req, res));
});