[🐞] Qwik - Build is Aggressively Treeshaking with Firebase

[jdgamble555]

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I've been working with the Firebase team to get Firebase working on Edge functions.

firebase/firebase-js-sdk#8355

Firebase now works on ever single Framework, even in Edge Environments (Bun, Deno, Cloudflare)... except on Qwik.

Reproduction

https://qwik-firebase-test.vercel.app/

Steps to reproduce

Here is issue on Firebase with deployment instructions:

firebase/firebase-js-sdk#8506

Repo: GitHub

Demo with error: Vercel Edge

System Info

Vercel Edge (no way to currently test this on Vercel Functions as there is not a Plugin)

Additional Information

Here is what the Firebase team said after agressive testing:

I was able to reproduce the problem. It appears that something in the build pipeline is aggressively tree shaking portions of the Firebase JS SDK when it packages it for the edge runtime. The "service" mentioned in the log file is that fact that Auth cannot properly register itself with the instance of FirebaseApp (or FirebaseServerApp). This is due to the hooks it would use to register itself with the instance of App are inexplicitly missing from the SDK implementation.

Here is the link to the GitHub Issue:

firebase/firebase-js-sdk#8506

Thanks,

J

Small Chance could be related to: #6322

Note: This could also be a Vercel Edge Plugin problem, but I'm not sure how the build process works.

[wmertens]

So qwik has to assume that every import does not have side effects on the client.

The reason is that no code runs on the client except in response to events. All qrl segments are only importing code they are actually using.

Can it be that firebase relies on side effects on the client?

Do you know which code for missing?

[jdgamble555]

Do you know which code for missing?

I don't know what this means.

Can it be that firebase relies on side effects on the client?

Can you be more specific about what you mean with side effects.

I can relay this to the Firebase issue.

Thanks,

J

[DellaBitta]

I can confirm that the Firebase SDK does indeed use side effects on import.

[wmertens]

@jdgamble555 As @DellaBitta confirms, importing the firebase SDK makes changes to the global object (side effects).

To solve the problem, the firebase import needs to happen in a different file. This file should export helpers that expose the desired firebase functionality.

Then when you use these helpers in your Qwik code, they won't be tree shaken and the firebase side effects can run on first import.

[DellaBitta]

Hi @wmertens,

Could you clarify? The app should have a single point where it imports the Firebase SDK and then export helpers that should be imported throughout the rest of the application?

That is, this is an App level change and not something in the SDK source base? Or am I misreading your post.

Thanks!

[jdgamble555]

@wmertens - Do you mean you can only import in one file here? Please clarify.

Also, is there any reason this would work in dev mode but not in production? It works on my local machine, but fails when deployed to both Netlify Edge and Vercel Edge.

Thanks,

J

[wmertens]

@jdgamble555 that is odd. The Qwik transform is the same in dev and prod but Vite does tree shaking in prod.

It would be best to edit your firebase in node_modules to console.log() when it loads and see if that log is still present in the prod bundle.

[jdgamble555]

So this is a Vite problem with Qwik? Why would this not effect other frameworks that use Vite?

If I edit something in node_modules it will just get overwritten in prod when the modules are installed.

(I'm using dynamic imports on everything Firebase btw)

J