1

I have an app which uses firebase firestore, hosting and authentication and I want to add analytics to it. I'm following the documentation at:

https://firebase.google.com/docs/analytics/get-started?authuser=0&platform=web

When I complete step 3: Add the Analytics JS SDK and initialize Analytics, my app fails to render. No errors, I just see a blank screen instead of the app in the browser.

I found out that the app breaks as soon as I add the first line:

import { getAnalytics } from "firebase/analytics";

What am I doing wrong?
Wait, I'm actually not doing anything...
What... is wrong?

My dependencies:

"dependencies": {
   "firebase": "^9.12.1",
   "pinia": "^2.0.23",
   "vue": "^3.2.37",
   "vue-i18n": "^9.2.2",
   "vue-router": "^4.1.5"
},
"devDependencies": {
   "@vitejs/plugin-vue": "^3.1.0",
   "sass": "^1.55.0",
   "vite": "^3.1.0"
}
Doug Stevenson
  • 297,357
  • 32
  • 422
  • 441
DuchSuvaa
  • 539
  • 1
  • 5
  • 22
  • 1
    I've run into a similar issue (in Svelte, not Vue) and in my case it was due to an ad blocker being run, triggering on the word "analytics". You can try using the `loadModule` pattern [seen here](https://stackoverflow.com/questions/38946112/es6-import-error-handling/65563996#65563996) to write some conditional logic around this import. – Phil Renaud Dec 11 '22 at 05:15

0 Answers0