Skip to content

fix: use browser field object map instead of exports for webpack compatibility#84

Merged
pyramation merged 2 commits into
mainfrom
fix/fetch-build-error
May 21, 2026
Merged

fix: use browser field object map instead of exports for webpack compatibility#84
pyramation merged 2 commits into
mainfrom
fix/fetch-build-error

Conversation

@NorOldBurden
Copy link
Copy Markdown
Contributor

@NorOldBurden NorOldBurden commented May 21, 2026

Summary

Fixes @constructive-io/fetch@1.0.0 breaking webpack builds for browser targets. The package uses require('node:http') and require('node:https') for *.localhost DNS routing in Node.js. Although wrapped in a runtime guard (process.versions?.node), webpack statically analyzes all require() calls and cannot resolve node: URIs for browser targets.

Approach: Split browser-safe entry points (localhost-fetch.browser.ts, index.browser.ts) that only use globalThis.fetch, and use the browser field object map in package.json to tell bundlers to swap node-specific files for their browser counterparts.

This follows the constructive-pnpm standard which explicitly says never use the exports map — the browser field object form achieves the same goal without that complexity:

\"browser\": {
  \"./index.js\": \"./index.browser.js\",
  \"./esm/index.js\": \"./esm/index.browser.js\",
  \"./localhost-fetch.js\": \"./localhost-fetch.browser.js\",
  \"./esm/localhost-fetch.js\": \"./esm/localhost-fetch.browser.js\"
}

This is well-supported by webpack, browserify, rollup, vite, esbuild, and parcel.

Review & Testing Checklist for Human

  • Verify @constructive-io/graphql-query and @constructive-io/upload-client webpack builds succeed with this version
  • Check that Node.js consumers still get the node:http/node:https localhost routing (the main/module entry points are unchanged)
  • Confirm no node: scheme references in the built browser files (dist/index.browser.js, dist/esm/index.browser.js)

Notes

  • The previous version of this PR used an exports field which is an anti-pattern per constructive-pnpm standards. Replaced with browser field object form which is simpler and equally effective.
  • Version bumped to 1.1.0 (from original PR commit).
  • Browser entry points just bind globalThis.fetch — no localhost workaround needed since browsers resolve *.localhost natively.

Link to Devin session: https://app.devin.ai/sessions/af68f5f456bb4faa9e937563ef2a5eb0
Requested by: @pyramation

NorOldBurden and others added 2 commits May 21, 2026 07:49
Remove the exports field (anti-pattern per constructive-pnpm standards)
and use the browser field object form instead. This tells webpack and
other bundlers to swap node-specific files for their browser-safe
equivalents without requiring exports map complexity.

The browser field maps both CJS and ESM entry points plus the internal
localhost-fetch module to their .browser counterparts, ensuring no
node:http/node:https references appear in browser bundles.
@devin-ai-integration devin-ai-integration Bot changed the title Fix fetch build error for web fix: use browser field object map instead of exports for webpack compatibility May 21, 2026
@pyramation pyramation merged commit 4e6c2ef into main May 21, 2026
44 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants