Fix vendor-react chunk crash: keep React core with react-dom

The web manualChunks put react-dom/react-router in a vendor-react chunk
but left core `react` (useLayoutEffect etc.) in a different chunk, so
react-dom executed before React was defined:
  "Cannot read properties of undefined (reading 'useLayoutEffect')".
Group react, react-dom, scheduler, react-router and jsx-runtime into the
same vendor-react chunk so the React runtime loads together and first.

Note: Capacitor APK builds must use CAPACITOR_BUILD=1 (single inlined
bundle) via `npm run android:build` — the plain `npm run build` emits the
chunked web output that breaks in the Android WebView.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
This commit is contained in:
shakespeare.diy 2026-08-27 12:50:53 +07:00
parent a83611072a
commit 945678c957

View file

@ -99,8 +99,20 @@ export default defineConfig(() => ({
) {
return 'vendor-bitcoin';
}
// React ecosystem — very stable, long cache life
if (id.includes('react-dom') || id.includes('react-router')) {
// React ecosystem — very stable, long cache life.
// IMPORTANT: `react` (core, with useLayoutEffect etc.) MUST live in
// the SAME chunk as react-dom / react-router. If react-dom is split
// into vendor-react but core `react` lands elsewhere, react-dom runs
// before React is defined → "Cannot read properties of undefined
// (reading 'useLayoutEffect')". The `/react/` and scheduler matches
// below keep the whole React runtime together and loaded first.
if (
id.includes('node_modules/react/') ||
id.includes('node_modules/react-dom/') ||
id.includes('node_modules/scheduler/') ||
id.includes('react-router') ||
id.includes('react/jsx-runtime')
) {
return 'vendor-react';
}
// Radix UI components — large but stable