@firebase/auth: Auth (10.3.0): INTERNAL ASSERTION FAILED: Could not find fetch implementation, make sure you call FetchProvider.initialize() with an appropriate polyfillTitle for the bug

[ocavue]

Operating System

N/A

Browser Version

N/A

Firebase SDK Version

[email protected], @firebase/[email protected]

Firebase SDK Product:

Auth

Describe your project's tooling

Next.js with Vercel Edge runtime.

Describe the problem

When running Firebase, I get the following error:

@firebase/auth: Auth (10.3.0): INTERNAL ASSERTION FAILED: Could not find fetch implementation, make sure you call FetchProvider.initialize() with an appropriate polyfill

Steps and code to reproduce issue

I checked the code and I believe it's quite simple to verify this is a bug, and I will describe it below. Thus I don't provide a detailed repilication. Let me know if you still want me to prepare a minimal repo to reproduce this bug.

• The package @firebase/[email protected] provides multiple exports, shown in its package.json. One of them is dist/esm2017/index.js.
• dist/esm2017/index.js just re-exports some objects from dist/esm2017/index-9a76d29a.js.
• dist/esm2017/index-9a76d29a.js defines class FetchProvider at line 742, and calls FetchProvider.fetch() at line 915 and line 1470. However, FetchProvider.initialize() has never been called in this file, and self is not a standard JavaScript global property (it only exists in browser environment). That's why I get this error.

[hsubox76]

To clear things up, we actually provide multiple ESM2017 bundles for auth, one for the browser, and one for Node. The file path you're looking at is the one for the browser. In a Node environment (which is NextJS's SSR environment), the default NextJS config should automatically pull the Node "import" bundle which is here:

firebase-js-sdk/packages/auth/package.json

Line 18 in 02e2518

"import": "./dist/node-esm/index.js",

Meanwhile, when NextJS is rendering client side, it uses a different config and should pull the browser ESM2017 bundle here:

firebase-js-sdk/packages/auth/package.json

Line 36 in 02e2518

"import": "./dist/esm2017/index.js"

The Node bundle calls FetchProvider.initialize() while the browser bundle does not, as it doesn't need to. When I've previously dug into Next, it looks like its default configuration correctly pulls the correct bundle for each use case. Are you using the default configuration or is it modified? What version of NextJS are you using?

[ocavue]

Firebase does work well on browser and Node environment. But there are also other JavaScript environments in addition to these two.

Particularly, I see this error in a serverless function JavaScript environment called Vercel Edge Runtime, which is not a browser and not a Node environment. It provides some Web APIs like fetch, Request, and Response, but not all (like the self mentioned in this issue). Sorry I didn't make this clear in the issue description.

I know the Firebase team might only want to support browser and Node.js environments officially. However, my pull request seems to be minimal and harmless so I hope it can be accepted :)

[hsubox76]

Sorry for the delay, the PR looks good, we just need to get it through CI again (added a comment in the PR).