Using the firebase/analytics framework causes the entire application to stop working

Describe the bug

When importing the firebase/analytics sub-package from the firebase framework, everything stops working. Using the rest of the framework seems to be fine. It’s unclear if this is a problem with firebase (likely) or vite, but figured I’d ask here first.

The following works:

import firebase from "firebase/app";
import "firebase/auth";

The following does not:

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/analytics";

Just including the main import with analytics will also fail:

import firebase from "firebase/app";
import "firebase/analytics";

Reproduction

I’ve tried this both the firebase version 8 and version 9 libraries.

yarn create @vitejs/app: options vue then vue-ts

Edit src/main.ts to add:

import firebase from "firebase/app";
import "firebase/analytics"

and:

const firebaseConfig = {
  // put your firebase config here
};
firebase.initializeApp(firebaseConfig);

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 4.91 GB / 15.34 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.5.0 - ~/Development/.sdks/node/current/bin/node
    Yarn: 1.22.4 - ~/.applications/yarn/bin/yarn
    npm: 7.14.0 - ~/Development/.sdks/node/current/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Chromium: 91.0.4472.77
  npmPackages:
    @vitejs/plugin-vue: ^1.2.3 => 1.2.3 
    vite: ^2.3.5 => 2.3.5 

Used package manager: yarn

Logs

The in-browser error console then contains:

Loading failed for the module with source “http://localhost:3001/node_modules/.vite/firebase_analytics.js?v=ad93ae6b”. localhost:3001:12:1
[vite] connecting... client.ts:13:8
Loading failed for the module with source “http://localhost:3001/node_modules/.vite/firebase_app.js?v=ad93ae6b”. localhost:3001:12:1
[vite] connected. client.ts:43:14
Loading failed for the module with source “http://localhost:3001/node_modules/.vite/vue.js?v=ad93ae6b”. localhost:3001:12:1
Loading failed for the module with source “http://localhost:3001/src/App.vue”. localhost:3001:12:1

Before submitting the issue, please make sure you do the following

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn’t already an issue that reports the same bug to avoid creating a duplicate.
• Provide a description in this issue that describes the bug.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

[midanosi]

@lukef I just ran into exactly the same problem, and figured out that the culprit was uBlock origin extension.

On chrome, the status in the network tab was (blocked: other), and error printed to console was

GET http://localhost:3037/node_modules/.vite/firebase_analytics.js?v=33137628 net::ERR_BLOCKED_BY_CLIENT

But on firefox, it more conveniently told me via the network tab in the Transferred column: “Blocked by uBlock Origin” And the error in console was:

Loading failed for the module with source “http://localhost:3037/node_modules/.vite/firebase_analytics.js?v=33137628”.

Disabling the extension made my app load in both chrome and firefox.

[bluwy]

I’ll go ahead and assume this is an issue with the ad blocker as OP hasn’t responded since https://github.com/vitejs/vite/issues/3612#issuecomment-892534394. I’ve seen similar issues in the pass too where the dev server crashes because of the word “analytics”.

will this problem also be present in prod build? or just in development?

It should be dev only as Vite loads the path raw, like http://localhost:3000/bla/node_modules/@firebase/analytics/index.js. In build, it is bundled into hashed chunks without the word “analytics”.