firebase.analytics() throwing Unhandled Runtime Error in "with-firebase" example

[shadmankhan]

What example does this report relate to?

with-firebase

What version of Next.js are you using?

11.1.2

What version of Node.js are you using?

14.17.3

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

How are you deploying your application?

Not yet deployed

Describe the Bug

Hi team,

In the file, clientApp.js, if we are adding "measurementId" in the "clientCredentials" constant, in order to use Google Analytics feature. The page is breaking with the following error:

In Chrome:

Uncaught TypeError: (0 , _firebase_util__WEBPACK_IMPORTED_MODULE_3__.areCookiesEnabled) is not a function
    at factory (index.esm.js?dcaa:492)
    at Component.instance.INTERNAL.registerComponent._firebase_component__WEBPACK_IMPORTED_MODULE_4__.Component.setServiceProps.settings [as instanceFactory] (index.esm.js?dcaa:563)
    at Provider.getOrInitializeService (index.cjs.js?4be4:219)
    at Provider.getImmediate (index.cjs.js?4be4:120)
    at FirebaseAppImpl._getService (index.cjs.js?c23d:224)
    at FirebaseAppImpl.firebaseAppImpl.<computed> [as analytics] (index.cjs.js?c23d:436)
    at Object.serviceNamespace [as analytics] (index.cjs.js?c23d:416)
    at eval (webpack-internal:///./firebase/clientApp.js:38)
    at Module../firebase/clientApp.js (_app.js?ts=1633211046961:149)
    at Module.options.factory (webpack.js?ts=1633211046961:685)
    at __webpack_require__ (webpack.js?ts=1633211046961:37)
    at fn (webpack.js?ts=1633211046961:354)
    at eval (userContext.js:12)
    at Module../context/userContext.js (_app.js?ts=1633211046961:138)
    at Module.options.factory (webpack.js?ts=1633211046961:685)
    at __webpack_require__ (webpack.js?ts=1633211046961:37)
    at fn (webpack.js?ts=1633211046961:354)
    at eval (_app.js:6)
    at Module../pages/_app.js (_app.js?ts=1633211046961:160)
    at Module.options.factory (webpack.js?ts=1633211046961:685)
    at __webpack_require__ (webpack.js?ts=1633211046961:37)
    at fn (webpack.js?ts=1633211046961:354)
    at eval (webpack-internal:///./node_modules/next/dist/build/webpack/loaders/next-client-pages-loader.js?page=%2F_app&absolutePagePath=private-next-pages%2F_app!:5)
    at eval (route-loader.js?361d:207)

In Safari:

TypeError: (0,_firebase_util__WEBPACK_IMPORTED_MODULE_3__.areCookiesEnabled) is not a function. (In '(0,_firebase_util__WEBPACK_IMPORTED_MODULE_3__.areCookiesEnabled)()', '(0,_firebase_util__WEBPACK_IMPORTED_MODULE_3__.areCookiesEnabled)' is undefined)

Expected Behavior

The expected behavior is at least the page should not break.

To Reproduce

Steps to reproduce:

1. Clone the next.js repo.
2. Navigate to "with-firebase" example cd ./examples/with-firebase/
3. Install the dependencies mentioned in the package.json, by either yarn or npm install
4. Create a file ".env.local" and add all the environment variables mentioned in the ".env.local.example" file.
5. Also add one more environment variable, NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="YOUR_FIREBASE_MEASUREMENT_ID", in order to use Google Analytics. ("measurementId" you can get from your firebase project setting's configurations. It will be available only if you have enabled Google Analytics for your project.)
6. Run the example, by either yarn dev or npm run dev

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.