fix(react-router): avoid Webpack inlining React.use static analysis#7193
fix(react-router): avoid Webpack inlining React.use static analysis#7193SAY-5 wants to merge 2 commits intoTanStack:mainfrom
Conversation
…anStack#7176) Recent bundler updates inline `const REACT_USE = 'use'; React[REACT_USE]` back into the literal `React['use']` in the published package, which re-triggers Webpack's static analysis and breaks builds against React 18 (which doesn't export `use`). Use `Reflect.get(React, 'use')` instead. Reflect.get is a real runtime call — bundlers don't fold it into direct property access — so the property name never appears as a static literal in the bundled output, and Webpack's static analyzer has nothing to flag. Closes TanStack#7176
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughReplaces module-level string constant and bracket-style lookup for React's "use" with a runtime Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Bundle Size Benchmarks
Trend sparkline is historical gzip bytes ending with this PR measurement; lower is better. |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/react-router/src/utils.ts`:
- Around line 17-19: The exported reactUse is assigned via Reflect.get(React,
'use') which is typed as any at runtime; add a runtime guard that verifies the
retrieved value is actually a function (and optionally has arity 1) before
assigning/exporting it so the runtime value matches the declared signature.
Replace the direct Reflect.get usage with a checked assignment: get the
candidate via Reflect.get(React, 'use'), verify typeof candidate === 'function'
(and candidate.length === 1 if you want stricter validation), and only then cast
and export it as reactUse; otherwise export undefined. This uses the existing
reactUse symbol and Reflect.get(React, 'use') location to find and fix the code.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 10224a06-e4b6-4a96-8b78-cc7cad4debf5
📒 Files selected for processing (1)
packages/react-router/src/utils.ts
Wrap the Reflect.get result in a typeof check before exporting as reactUse so the runtime value is guaranteed to be a function matching the declared signature, rather than relying solely on the TypeScript cast.
Per #7176, recent bundler updates inline
const REACT_USE = 'use'; React[REACT_USE]back into the literalReact['use']in the published package, which re-triggers Webpack's static analysis and breaks builds against React 18 (which doesn't exportuse).This was previously fixed by #6355, but the bundled output regressed somewhere between #6355 and #6926.
This PR replaces the manual indirection with
Reflect.get(React, 'use').Reflect.getis a real runtime call — bundlers don't fold it into a direct property access — so the property name never appears as a static literal in the bundled output, and Webpack's static analyzer has nothing to flag.Closes #7176
Summary by CodeRabbit