fix(react-router): prevent webpack static analysis of React.use with let binding#7182
fix(react-router): prevent webpack static analysis of React.use with let binding#7182mixelburg wants to merge 1 commit intoTanStack:mainfrom
Conversation
📝 WalkthroughWalkthroughChanged Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
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`:
- Line 7: Replace the silent use of let REACT_USE = 'use' with an inline ESLint
disable comment that documents why mutable binding is intentional; specifically
add a comment like /* eslint-disable-next-line prefer-const -- mutable binding
prevents bundlers from constant-folding the string so React[REACT_USE] remains
dynamic */ directly above or on the REACT_USE declaration to suppress
prefer-const and explain the rationale (symbol: REACT_USE in
packages/react-router/src/utils.ts).
🪄 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: efaa0812-1371-418a-9f88-75a286f37e12
📒 Files selected for processing (1)
packages/react-router/src/utils.ts
| // sees React.use referenced (since 'use' is not exported from React 18). | ||
| // This uses a dynamic string lookup to avoid the static analysis. | ||
| const REACT_USE = 'use' | ||
| let REACT_USE = 'use' |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify the build output preserves dynamic lookup pattern and doesn't inline 'use'
# Build the package (adjust command as needed for your build setup)
# Then search the compiled output for the pattern
fd --type f --extension js --extension mjs . packages/react-router/dist packages/react-router/build 2>/dev/null | head -20 | xargs rg -l "REACT_USE|React\[|\.use" 2>/dev/null || echo "Note: Build output directory not found. Please build the package first and inspect the ESM output manually."Repository: TanStack/router
Length of output: 50371
🏁 Script executed:
cat -n packages/react-router/src/utils.ts | head -50Repository: TanStack/router
Length of output: 1988
🏁 Script executed:
rg "eslint-disable" packages/react-router/src/utils.tsRepository: TanStack/router
Length of output: 41
Add ESLint suppression comment to explain the intentional use of let.
Line 7 uses let instead of const to prevent bundlers from constant-folding the string literal, ensuring the dynamic lookup pattern React[REACT_USE] is preserved in compiled output rather than being inlined as React["use"]. ESLint's prefer-const rule will flag this as an issue since the variable is never reassigned, but the mutable binding is necessary for this optimization strategy.
Add an ESLint disable comment with a clear explanation:
🔧 Proposed fix
// This uses a dynamic string lookup to avoid the static analysis.
+// eslint-disable-next-line prefer-const -- Must be `let` to prevent bundler constant-folding
let REACT_USE = 'use'🧰 Tools
🪛 ESLint
[error] 7-7: 'REACT_USE' is never reassigned. Use 'const' instead.
(prefer-const)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-router/src/utils.ts` at line 7, Replace the silent use of let
REACT_USE = 'use' with an inline ESLint disable comment that documents why
mutable binding is intentional; specifically add a comment like /*
eslint-disable-next-line prefer-const -- mutable binding prevents bundlers from
constant-folding the string so React[REACT_USE] remains dynamic */ directly
above or on the REACT_USE declaration to suppress prefer-const and explain the
rationale (symbol: REACT_USE in packages/react-router/src/utils.ts).
|
this feels like a "hacky" workaround... let's see if we can make this work reliably |
2 participants
Fixes #7176
In #6926, the
const REACT_USE = 'use'statement started getting optimized away by the bundler (constant folding), replacingReact[REACT_USE]withReact['use']in the published ESM output. This caused Webpack to fail on React 18 apps again since it statically analyzes the'use'property access.Changing
consttoletprevents the bundler from inlining the string literal, restoring the dynamic lookup behaviour in the compiled output:Summary by CodeRabbit
Release Notes
No user-visible changes. This release contains internal code optimizations that do not affect application functionality or behavior.