Unable to use Firebase-Auth Feature in esm Bundle in Browser

[tonprince]

Describe your environment

• Operating System version: macOS Catalina 10.15.5
• Browser version: Firefox 78.02
• Firebase SDK version: 7.16.0
• Firebase Product: firebase, auth, storage, firestore
• Svelte version: 3.23.2
• Rollup version: 2.19.0

Describe the problem

I am trying to load the firebase-auth feature in a Svelte webapp with rollup and get an error:
uncaught TypeError: index_cjs$2.INTERNAL is undefined

The error occurs in auth.esm.js file where the variable "firebase.INTERNAL" is undefined.

Steps to reproduce

https://github.com/tonprince/firebase-test.git

File: App.svelte

<script>
  import firebase from "firebase/app";
  import "firebase/auth";
</script>
<div>Test</div>

When commenting out the line import 'firebase/auth'; the error disappears.

Workaround:

Add the following scripts into index.html:

<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.16.0/firebase-auth.js"></script>

[google-oss-bot]

I found a few problems with this issue:

• I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.
• This issue does not seem to follow the issue template. Make sure you provide all the required information.

[george-oakling]

Hi @tonprince

I had the same issue, downgrading @rollup/plugin-commonjs to 13.0.0 (fixed version) helped a lot.

[Feiyang1]

Can you change the config in rollup.config.ts to:

resolve({
			module: true, // instead of `browser: true`
			dedupe: ['svelte'],
			preferBuiltins: false
})

The reason it broke is that @firebase/app is pulled in as cjs (its browser field points to a cjs build), but @firebase/auth is pulled in as esm (it doesn't have a browser field, so rollup uses its module field). @rollup/plugin-commonjs transforms @firebase/app from cjs to esm in a way that makes it incompatible with @firebase/auth's esm build.

I will add a browser build in cjs to @firebase/auth, so rollup will use cjs for both of them, then you won't need this workaround.

[tonprince]

Thanks @Feiyang1 for the hint. Setting module=true ended up in another issue with resolving fs module, so I finally found a solution using mainFields in rollup config (browser and module fields are deprecated):

resolve({
  mainFields: ["module", "browser"],
  dedupe: ['svelte'],
  preferBuiltins: false
}),