[🐞] 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.

https://github.com/firebase/firebase-js-sdk/issues/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:

https://github.com/firebase/firebase-js-sdk/issues/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:

https://github.com/firebase/firebase-js-sdk/issues/8506

Thanks,

J

Small Chance could be related to: https://github.com/QwikDev/qwik/issues/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

[jdgamble555]

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?

@wmertens - Clarity for the Firebase Team would definitely help if you could. Thank you!

[wmertens]

@jdgamble555 the node modules edit is just to figure out which code runs when.

And yes I think importing firebase in one file that exports helpers would help.

[jdgamble555]

@wmertens - I'm using dynamic imports on everything Firebase, and it does work in npm run preview.

1. Would dynamic imports matter?
2. Does preview still use tree shaking? It seems to work fine in preview.

J

[jdgamble555]

@wmertens - We have the Firebase team trying to help with this, but everyone seems to think this is a Qwik issue.

3. Is there anything that production does to the treeshaking differently with dev than prod?

This could be a simple fix if we can at least figure out the problem.

Thanks,

J

[wmertens]

The best way to debug this is to work backwards. In the browser, find out what isn't working, and then determine what code should have run to make it work, and find where it should have been loaded, until you find a difference.

The optimizer doesn't handle prod and dev differently tree-shaking wise, but vite bundles things together in prod that might have side effects that make it work. Wout.

On Sat, 21 Dec 2024, 23:26 Jonathan Gamble, @.***> wrote:

@wmertens https://github.com/wmertens - We have the Firebase team trying to help with this, but everyone seems to think this is a Qwik issue.

3. Is there anything that production does to the treeshaking differently than dev or prod?

This could be a simple fix if we can at least figure out the problem.

Thanks,

J

— Reply to this email directly, view it on GitHub https://github.com/QwikDev/qwik/issues/7052#issuecomment-2558231370, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAANNFXJUJT4MQPMQPRLJKL2GXFI3AVCNFSM6AAAAABRNZXC4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDKNJYGIZTCMZXGA . You are receiving this because you were mentioned.Message ID: @.***>

[jdgamble555]

This is a server problem, not browser problem, so harder to debug.

What would vite do differently with Qwik that it wouldn't do in other frameworks?

This is only problematic with Qwik and on the server in production.

J

[wmertens]

@jdgamble555 did you try putting all the firebase code in a separate file, and import helpers from it?

[github-actions[bot]]

Hello @jdgamble555. Please provide the missing information requested above. Issues marked with STATUS-2: missing info will be automatically closed if they have no activity within 14 days. Thanks 🙏

[jdgamble555]

@wmertens - It has been almost a year since I looked at this, but 100% I tried that. The compiler is getting rid of side effects, even on the server, which is the problem. Firebase, for example, uses a global outside of the class. This should not be compiled away on the server, which is why this doesn't work.

J