diff --git a/apps/tangle-cloud/vite.config.ts b/apps/tangle-cloud/vite.config.ts index ce4d2ec22..e92543b51 100644 --- a/apps/tangle-cloud/vite.config.ts +++ b/apps/tangle-cloud/vite.config.ts @@ -72,13 +72,23 @@ export default defineConfig({ if (id.includes('viem')) return 'viem'; if (id.includes('@tanstack')) return 'tanstack'; if (id.includes('react-router')) return 'router'; + // Co-locate react/react-dom with @radix-ui. Splitting them lets + // Rollup hoist the CJS-interop helper (`_getDefaultExportFromCjs`) + // into whichever chunk evaluates first; on some content-hash + // layouts the helper landed in the radix chunk and the react + // chunk imported it back, forming a load-order cycle that + // crashed the app at module init with + // `Cannot read properties of undefined (reading 'forwardRef')` + // when radix's top-level `Qu.reduce(...)` ran before react's + // bindings had initialised. Co-resident avoids the cycle since + // radix depends on react and must evaluate after it anyway. if ( id.includes('node_modules/react/') || - id.includes('node_modules/react-dom/') + id.includes('node_modules/react-dom/') || + id.includes('@radix-ui') ) { return 'react'; } - if (id.includes('@radix-ui')) return 'radix'; return undefined; }, }, diff --git a/apps/tangle-dapp/vite.config.ts b/apps/tangle-dapp/vite.config.ts index ca4c0153d..8692fe9dc 100644 --- a/apps/tangle-dapp/vite.config.ts +++ b/apps/tangle-dapp/vite.config.ts @@ -166,13 +166,20 @@ export default defineConfig({ if (id.includes('node_modules/globalthis/')) return 'utils'; if (id.includes('@tanstack')) return 'tanstack'; if (id.includes('react-router')) return 'router'; + // Co-locate react/react-dom with @radix-ui. See tangle-cloud's + // vite.config.ts for the full incident write-up — splitting + // react from radix lets Rollup hoist the CJS-interop helper + // into the radix chunk, forming a load-order cycle that crashes + // the app with `Cannot read properties of undefined (reading + // 'forwardRef')` when radix's top-level `Qu.reduce(...)` runs + // before react's bindings have initialised. if ( id.includes('node_modules/react/') || - id.includes('node_modules/react-dom/') + id.includes('node_modules/react-dom/') || + id.includes('@radix-ui') ) { return 'react'; } - if (id.includes('@radix-ui')) return 'radix'; return undefined; }, },