D3 v7 ES Module Transition: Why Local Scripts Fail in Production

Goal

We want to load external JSON data with d3.json in a D3 v7 application that is bundled as ES modules and served from a subpath in production. The same code works fine on a local dev server.

Constraints & Uncertainty

• D3 v7 ships only as named ES module exports; a global d3 object is no longer available unless a UMD build is explicitly loaded.
• Data requests use the native fetch API. In production the origin differs, and the server may not include the necessary Access-Control-Allow-Origin header.
• Relative URLs for data, images, or fonts are resolved by the browser. When the app is served from /app instead of the site root, relative paths break unless adjusted.
• Bundlers may tree‑shake modules, potentially dropping side‑effects that register the d3 namespace.

Unresolved Questions

1. What fetch options or server headers must be configured to allow d3.json requests to succeed when the application is deployed under a subpath?
2. How can a bundler be configured to preserve a global d3 object for legacy code that still expects it?
3. What strategy should be used to rewrite relative asset URLs so that they resolve correctly in a production subpath environment?