1.4.1: nested pages dirs, CommonJS require of react in client bundles

- Page URL paths are now relative to src/pages. The old greedy
  `.*/pages/` cut mapped src/pages/admin/pages/index.tsx to /index, so
  every page under a nested `pages` directory collided with the home page
  and was never bundled. SSR also tells API routes by URL path now.
- CommonJS `require("react…")` in client bundles (for example
  use-sync-external-store/shim, pulled in by MUI) threw "Dynamic require
  of "react" is not supported" in the browser. Those requires now go
  through a small bundled ESM module that imports the external.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
2026-11-09 08:37:44 +01:00
co-authored by Claude Opus 5.5
parent 96e392f556
commit 33145bea9e
11 changed files with 246 additions and 29 deletions
+27 -1
View File
@@ -128,18 +128,44 @@ export default async function allPagesESBuildContextBundler(params) {
], (line) => log.error(line));
}
}
function forceExternalReact() {
const ExternalRequireNamespace = "bunext-external-require";
/**
* CommonJS `require("react")` (e.g. `use-sync-external-store/shim`, pulled
* in by MUI) for a module that is external in ESM output becomes esbuild's
* `__require`, which throws "Dynamic require of "react" is not supported" in
* the browser. Give those requires a small bundled ESM module that imports
* the external instead; esbuild wires `require()` to it.
*/
export function externalRequireShim(specifier) {
const spec = JSON.stringify(specifier);
// A namespace import never fails to link, even when the vendor module has
// no default export (jsx-runtime); fall back to the namespace for
// `require(...).default` (Babel interop).
return [
`import * as ns from ${spec};`,
`export * from ${spec};`,
`export default ns.default ?? ns;`,
].join("\n");
}
export function forceExternalReact() {
return {
name: "force-external-react",
setup(build) {
build.onResolve({ filter: /^react(-dom)?(\/.*)?$/ }, (args) => {
if (args.pluginData?.externalReact)
return null;
if (args.kind === "require-call") {
return { path: args.path, namespace: ExternalRequireNamespace };
}
return {
path: args.path,
external: true,
};
});
build.onLoad({ filter: /.*/, namespace: ExternalRequireNamespace }, (args) => ({
contents: externalRequireShim(args.path),
loader: "js",
}));
},
};
}