Error: Component auth has not been registered yet

Help
1

Hi,
I have a deployed project with nextjs 14 and firebase.
The deployed version is working fine. I did some minor changes and I updated the git repository.

When I was looking on my vercel dashboard I saw that I have this error:

Error: Component auth has not been registered yet

14:42:15.467 at ee.initialize (/vercel/path0/.next/server/app/api/update-email/route.js:1:11716)
14:42:15.467 at mN (/vercel/path0/.next/server/app/api/update-email/route.js:11:109623)
14:42:15.467 at Bw (/vercel/path0/.next/server/app/api/update-email/route.js:11:129457)
14:42:15.467 at 33424 (/vercel/path0/.next/server/app/api/update-email/route.js:12:23974)
14:42:15.467 at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
14:42:15.467 at __webpack_exec__ (/vercel/path0/.next/server/app/api/update-email/route.js:47:134020)
14:42:15.467 at /vercel/path0/.next/server/app/api/update-email/route.js:47:134125
14:42:15.467 at t.X (/vercel/path0/.next/server/webpack-runtime.js:1:1206)
14:42:15.467 at /vercel/path0/.next/server/app/api/update-email/route.js:47:134105
14:42:15.468 at Object.<anonymous> (/vercel/path0/.next/server/app/api/update-email/route.js:47:134186)
14:42:15.477
14:42:15.478 > Build error occurred
14:42:15.479 Error: Failed to collect page data for /api/update-email
14:42:15.479 at /vercel/path0/node_modules/next/dist/build/utils.js:1269:15
14:42:15.480 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
14:42:15.480 type: 'Error'
14:42:15.480 }
14:42:15.508 Error: Command "npm run build" exited with 1

The thing is I didn’t touch this file. And I didn’t touch any relevant files like the ones that handles the firebase.
I did the build on my computer and worked fine. I even changed the node version to match the one on my comp but still the same.

If I remove the /api/update-email folder, it will build the project but I will get the same error:

Uncaught (in promise) Error: Component auth has not been registered yet
    at o.initialize (9983-0b320b0bdac82380.js:1:81900)
    at d441faa4-7d6aff50c50f3feb.js:1:78948
    at ro (d441faa4-7d6aff50c50f3feb.js:1:78972)
    at 85081 (7392-16c78d257af26937.js:1:4041)
    at s (webpack-ea53e56806cb6941.js:1:152)
    at 69624 (2019-a91457f20c6d6223.js:1:27432)
    at s (webpack-ea53e56806cb6941.js:1:152)
    at 9821 (2019-a91457f20c6d6223.js:1:22838)
    at s (webpack-ea53e56806cb6941.js:1:152)
    at 80562 (2019-a91457f20c6d6223.js:1:441)

I used the same repository to try starting a different project and I have the same issue.
Can you help me please?

2

Hey, @lazybeggar! Welcome to the Vercel Community :smile:

Could you share a minimal reproducible example with us?

1 Like
3

Hi, Thank you for your response.
my /update-email/route.ts:

import { NextRequest, NextResponse } from 'next/server';
import { doc, deleteDoc, setDoc } from 'firebase/firestore';
import { firestore } from '@/libs/firebase/config';

export async function POST(req: NextRequest) {
  try {
    const body = await req.json();
    const { oldEmail, newEmail, userType, userName } = body;

    if (!oldEmail || !newEmail || !userType || !userName) {
      return NextResponse.json(
        { message: 'Missing required fields' },
        { status: 400 }
      );
    }

    const oldUserDocRef = doc(firestore, 'users', oldEmail);
    const newUserDocRef = doc(firestore, 'users', newEmail);


    try {
      await deleteDoc(oldUserDocRef);      
      await setDoc(newUserDocRef, {
        email: newEmail,
        userType,
        status: 'registered',
        name: userName,
        updatedAt: new Date().toISOString(),
      });

      return NextResponse.json({
        message: `User with email ${oldEmail} successfully updated to ${newEmail}`,
      });
    } catch (error) {
      console.error('Error updating Firestore records:', error);
      return NextResponse.json(
        { message: 'Failed to update user data in Firestore' },
        { status: 500 }
      );
    }
  } catch (error) {
    console.error('Unexpected error:', error);
    return NextResponse.json(
      { message: 'An unexpected error occurred' },
      { status: 500 }
    );
  }
}

an my config.ts:

import { getAuth } from 'firebase/auth';
import { initializeApp, getApps, getApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getStorage } from 'firebase/storage';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};
let firebaseApp;
if (!getApps().length) {
  firebaseApp = initializeApp(firebaseConfig);
} else {
  firebaseApp = getApp();
}
export const firebaseAuth = getAuth(firebaseApp);
export const firestore = getFirestore(firebaseApp);
export const storage = getStorage(firebaseApp);

My problem is this:
My current build is working but only when i try to update I will receive the error:
Error: Component auth has not been registered yet.
And if try ‘npm run build’ on localhost it’s working without errors and of course on dev mode is working fine on localhost.

Thank you

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.