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 https://github.com/firebase/firebase-js-sdk/issues/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 https://github.com/FirebaseExtended/reactfire/issues/490 and https://github.com/FirebaseExtended/reactfire/issues/491, if that helps.

[ky28059]

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