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 2 commits intoTanStack:mainfrom
Conversation
|
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)
📝 WalkthroughWalkthroughThe 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
|
this feels like a "hacky" workaround... let's see if we can make this work reliably |
|
View your CI Pipeline Execution ↗ for commit cddfe3c
☁️ Nx Cloud last updated this comment at |
![nx-cloud[bot]](https://avatars.githubusercontent.com/in/80458?s=60&v=4){kind=small}
There was a problem hiding this comment.
Nx Cloud is proposing a fix for your failed CI:
We add the missing eslint-disable-next-line prefer-const comment above the let REACT_USE = 'use' declaration to fix the failing ESLint task. The PR commit changed const to let to prevent bundler constant-folding, but omitted the suppression comment, causing ESLint's prefer-const rule to flag the never-reassigned let binding. These changes restore the intended state that the PR diff described.
Tip
✅ We verified this fix by re-running tanstack-react-start-e2e-css-modules:test:e2e, @tanstack/react-router:test:eslint, tanstack-vue-start-e2e-basic-spa:test:e2e.
diff --git a/packages/react-router/src/utils.ts b/packages/react-router/src/utils.ts
index 8052d007e2..f3cbf54613 100644
--- a/packages/react-router/src/utils.ts
+++ b/packages/react-router/src/utils.ts
@@ -5,6 +5,7 @@ import * as React from 'react'
// React 18 with Webpack, which statically analyzes imports and fails when it
// sees React.use referenced (since 'use' is not exported from React 18).
// 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'
/**
Because this branch comes from a fork, it is not possible for us to apply fixes directly, but you can apply the changes locally using the available options below.
Apply changes locally with:
npx nx-cloud apply-locally V4o8-7y2x
Apply fix locally with your editor ↗ View interactive diff ↗
🎓 Learn more about Self-Healing CI on nx.dev
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