Firebase Admin Module Not Found Can't Resolve '@firebase/app' NextJs

Question

I am working on a project that is using Vercel's NextJS build with Firebase Hosting. I've added Firebase functions which I have working well. In the firebaseFunctions.js file I created an export so that I could share the connection to Firebase with other files. However, when trying to use the export I am getting the following error.

The file structure of the project looks like the following.

The following file is the firebaseFunctions.js file that includes the Firebase app initialization and Firestore initialization. All code in this file works when using functions or trying to connect to Firestore.

 const { join } = require('path'); // From NextJS Vercel Base Build
const { default: next } = require('next'); // From NextJS Vercel Base Build
const isDev = process.env.NODE_ENV !== 'production'; // From NextJS Vercel Base Build
const nextjsDistDir = join('src', require('./src/next.config.js').distDir); // From NextJS Vercel Base Build
const admin = require('firebase-admin'); // Firebase Admin SDK for NodeJS.
const functions = require('firebase-functions'); // For NextJS + Firebase Functions + Firebase Hosting.
const serviceAccount = require('./serviceAccountKey.json'); // Service account key for Firebase Admin SDK.

admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
});

const db = admin.firestore();

const nextjsServer = next({
  dev: isDev,
  conf: {
    distDir: nextjsDistDir,
  },
});

const nextjsHandle = nextjsServer.getRequestHandler();

// Nextjs Cloud Function to allow for Firebase Hosting.
exports.nextjsFunc = functions.https.onRequest((req, res) => {
  return nextjsServer.prepare().then(() => nextjsHandle(req, res));
});

exports.getCustomToken = functions.https.onCall(async (data, context) => {
  // Do something here.
});

module.exports.admin = admin;
module.exports.db = db;

You can see that I export both admin and db here.

In CreateTimer I require db. However this does not allow me access to db.

const db = require('./../firebase/firebase');

Any help with why this may be would be appreciated.

I've done the following.

Verified that Firebase is installed.
Tested Firebase from firebaseFunctions.js

jonthornham jonthornham · Accepted Answer · 2021-02-11T03:22:47

My issue was that I was trying to use the Firebase Admin SDK with React which is a front side language. Firebase Admin can only be used with backend environment like Nodejs. I created a web project in Firebase and then configured this for use in the app.

Firebase Admin Module Not Found Can't Resolve '@firebase/app' NextJs

1 Answers