From 945678c957471b78b08f1df1800f0856c9511d05 Mon Sep 17 00:00:00 2001 From: "shakespeare.diy" Date: Thu, 27 Aug 2026 12:50:53 +0700 Subject: [PATCH] Fix vendor-react chunk crash: keep React core with react-dom MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- vite.config.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/vite.config.ts b/vite.config.ts index 15adf71..74467d3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -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