`undici` dependency breaks bundling with React Native (Expo) due to use of `stream` module

[arvl130]

Operating System

Windows, Linux

Browser Version

Chrome, Firefox

Firebase SDK Version

10.7.1

Firebase SDK Product:

Auth

Describe your project's tooling

• React Native with Expo SDK 49
• Development client: enabled
• Developing for: Web (where the issue appears), Android, iOS

Describe the problem

Initializing Firebase on Expo with the dev client enabled, and running onAuthStateChanged produces this bundling error:

Web Bundling failed 16275ms
Unable to resolve "stream/web" from "node_modules/undici/lib/core/util.js"
Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 85.6% (815/881)
Metro error: Unable to resolve module stream/web from /home/arvl/src/firebase-reactnative-broken-deps-repro/node_modules/undici/lib/core/util.js: stream/web could not be found within the project or in these directories:
  node_modules

  369 | function ReadableStreamFrom (iterable) {
  370 |   if (!ReadableStream) {
> 371 |     ReadableStream = require('stream/web').ReadableStream
      |                               ^
  372 |   }
  373 |
  374 |   if (ReadableStream.from) {

  117 |             const errorObject = JSON.parse(text);
  118 |             var ref;
> 119 |             throw new MetroNodeError((ref = (0, _ansi).stripAnsi(errorObject.message)) != null ? ref : errorObject.message, errorObject);
      |                   ^
  120 |         }
  121 |         throw new Error(`[${res.status}]: ${res.statusText}\n${text}`);
  122 |     }

Call Stack
  requireFileContentsWithMetro (node_modules/@expo/cli/build/src/start/server/getStaticRenderFunctions.js:119:19)
  process.processTicksAndRejections (node:internal/process/task_queues)
  async Object.getStaticRenderFunctions (node_modules/@expo/cli/build/src/start/server/getStaticRenderFunctions.js:139:28)
  async bundleStaticHtml (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:170:43)
  async MetroBundlerDevServer.getStaticPageAsync (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:179:41)
  async (node_modules/@expo/cli/build/src/start/server/metro/MetroBundlerDevServer.js:291:46)

Based on my understanding, this error is caused by Firebase's new dependency undici. The package uses the stream module under the hood, which is not supported by Metro currently.

The workaround for now is to downgrade to v10.6.0 which doesn't use undici, and thus has no use of the stream module.

I've read from another issue that the Firebase project is in the process of migrating from node-fetch to undici. I'm curious if there are any better workarounds—or perhaps fixes—that could be done here, as it does not seem like Metro is going to support the stream module anytime soon.

Steps and code to reproduce issue

You may check this GitHub repo for a reproduction of the issue: https://github.com/arvl130/firebase-reactnative-broken-deps-repro