Use built-in fetch() in Browsers and node-fetch in Node

[znewton]

Work Item

#8725 discussion around node-fetch in the browser:

• We only support browsers that support Fetch() API, so we should not need to include Fetch polyfills.
• node-fetch v2 defers to Browser built-in Fetch() in browser context
• node-fetch v3 removes Browser support
• Bundling R11s-driver with Vite and Webpack 5 forces addition of Node polyfills to support node-fetch.

#9433 replaced node-fetch with cross-fetch in R11s-driver as a temporary fix for Vite and Webpack 5 projects, but this technically increases bundle size because it ponyfills Fetch().

Describe the outcome you expect

node-fetch and Fetch() polyfills/ponyfills should not be included in browser bundles.

Approach

Explicitly use Browser Fetch() in the browser, and "polyfill" Fetch() in Node (likely using node-fetch).

Open questions

• Why did Vite and Webpack 5 require Node polyfills even though node-fetch v2's package.json does not have Node dependencies in the "browser" entry?
• Upgrade node-fetch in both ODSP-driver and R11s-driver? Or add isomorphic fetch implementation to shared space (e.g. common-utils) so that each driver can consume when ready?

Acceptance criteria

• R11s-driver browser bundle does not include Fetch() polyfills
• R11s-driver bundles without Node polyfills in Vite and Webpack 5
• R11s-driver still functions in Node.js environment

[ryanbliss]

What is the status on this? Thanks?

[ghost]

This issue has been automatically marked as stale because it has had no activity for 180 days. It will be closed if no further activity occurs within 8 days of this comment. Thank you for your contributions to Fluid Framework!