Firebase `getAnalytics()` throws `Error: Component analytics has not been registered yet`

[ky28059]

Version info

React: 18.2.0

Firebase: 9.9.1

ReactFire: 4.2.1

Node: 16.14.2

Steps to reproduce

I'm trying (again) to port a CRA firebase project to nextjs and firebase/firebase-js-sdk#6019 still exists on the latest versions. To summarize, the same FirebaseProviders component that initializes and returns SDK providers in CRA break when using them in next. I have tried:

• Reinstalling firebase and reactfire

• Verifying that @firebase/app versions are not mismatched

• Verifying that firebase versions are not mismatched

but running npm run dev still gives the same error:

Expected behavior

const analytics = getAnalytics(firebase);

should not throw an error.

Actual behavior

The line throws the following error:

Error: Component analytics has not been registered yet
    at Provider.initialize (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\@firebase\component\dist\index.cjs.js:262:19)
    at initializeAnalytics (file:///C:/Users/Kevin/OneDrive/Documents/GitHub/watt/client/node_modules/@firebase/analytics/dist/esm/index.esm2017.js:1020:49)
    at getAnalytics (file:///C:/Users/Kevin/OneDrive/Documents/GitHub/watt/client/node_modules/@firebase/analytics/dist/esm/index.esm2017.js:999:12)
    at FirebaseProviders (webpack-internal:///./components/firebase/FirebaseProviders.tsx:27:87)
    at renderWithHooks (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5658:16)
    at renderIndeterminateComponent (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5731:15)
    at renderElement (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:6076:14)
    at renderContextProvider (C:\Users\Kevin\OneDrive\Documents\GitHub\watt\client\node_modules\react-dom\cjs\react-dom-server.browser.development.js:5920:3)

[ky28059]

Also experiencing #490 and #491, if that helps.

[ky28059]

Interestingly, setting experimental.esmExternals to false in next.config.js changes the error to

[Germano123]

// Initialize Firebase
const app = initializeApp(firebaseConfig)
const db = getFirestore(app)
const auth = getAuth(app)
const analytics = app.name ? getAnalytics(app) : null

try this out, I saw in another post.

[tyler-reitz]

Firebase Analytics requires window and can't run during SSR — that's the root cause here regardless of which error surfaces. Whether you see "Component analytics has not been registered yet" (a module bundling side effect of SSR loading Firebase twice) or window is not defined (what you'd see on current versions), both happen because FirebaseProviders is being server-rendered.

The fix is to prevent it from initializing on the server using next/dynamic with ssr: false:

// FirebaseProvidersWrapper.tsx
'use client';
import dynamic from 'next/dynamic';
const FirebaseProviders = dynamic(() => import('./FirebaseProviders'), { ssr: false });
export default function FirebaseProvidersWrapper({ children }) {
  return <FirebaseProviders>{children}</FirebaseProviders>;
}

Use FirebaseProvidersWrapper in your layout instead of FirebaseProviders directly. This ensures Analytics only initializes in the browser.

Closing as the workaround is well-established — feel free to reopen if you hit anything else.