fix: add React module chunking for Vite to resolve runtime errors #760, #761

[hiendv]

Seems like there is a regression after this commit.

Related: #760, #761

This should solve errors like these.

TypeError: Cannot read properties of undefined (reading 'forwardRef')

Should we also disable onlyExplicitManualChunks?

Summary by CodeRabbit

• Chores
  • Updated bundle splitting to group React-related modules into a dedicated "react" vendor chunk (alongside existing vendor groupings). No public APIs or other chunking behavior were changed.

[netlify]

✅ Deploy Preview for tanstack ready!

Name	Link
🔨 Latest commit	7251893
🔍 Latest deploy log	https://app.netlify.com/projects/tanstack/deploys/69b9603dbd39ed00077a62ef
😎 Deploy Preview	https://deploy-preview-762--tanstack.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 30 (🔴 down 36 from production) Accessibility: 90 (no change from production) Best Practices: 83 (no change from production) SEO: 97 (🔴 down 1 from production) PWA: 70 (no change from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 74df56f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a new manualChunks rule in vite.config.ts to assign modules whose id includes node_modules/react-dom/, node_modules/react/, or node_modules/scheduler/ to a dedicated "react" chunk, alongside existing vendor chunking rules.

Changes

Cohort / File(s)	Summary
Bundling Configuration vite.config.ts	Added manualChunks entry to group modules matching node_modules/react-dom/, node_modules/react/, and node_modules/scheduler/ into a "react" chunk; other chunk rules remain unchanged.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

Poem

🐇 I nibble bytes where modules meet,
I hop them into one neat suite,
React, dom, scheduler — snug and sweet,
One tidy chunk for faster feet.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly identifies the main change: adding React module chunking for Vite to resolve runtime errors, and references the specific issues (#760, #761) being addressed.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

vite.config.ts (1)

78-84: Quote style inconsistency and pattern precision.

Two minor observations:

1. Quote style: The new code uses double quotes while the rest of the file consistently uses single quotes. Consider aligning with the existing convention.

2. Pattern consistency: node_modules/react-dom lacks a trailing slash, unlike node_modules/react/. While unlikely to cause issues in practice, adding the slash prevents false matches on hypothetical react-dom-* packages and aligns both patterns.

🔧 Suggested diff

             if (
-              id.includes("node_modules/react-dom") ||
-              id.includes("node_modules/react/")
+              id.includes('node_modules/react-dom/') ||
+              id.includes('node_modules/react/')
             ) {
-              return "react";
+              return 'react'
             }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@vite.config.ts` around lines 78 - 84, Update the string literals and patterns
in the ID check inside the vite config so they match the project's single-quote
style and use consistent trailing slashes: change the double-quoted
"node_modules/react-dom" to a single-quoted 'node_modules/react-dom/' and change
"node_modules/react/" to 'node_modules/react/' in the conditional that returns
"react" (the block referencing id.includes(...) that returns "react") so both
patterns are precise and quote style is consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@vite.config.ts`:
- Around line 78-84: Update the string literals and patterns in the ID check
inside the vite config so they match the project's single-quote style and use
consistent trailing slashes: change the double-quoted "node_modules/react-dom"
to a single-quoted 'node_modules/react-dom/' and change "node_modules/react/" to
'node_modules/react/' in the conditional that returns "react" (the block
referencing id.includes(...) that returns "react") so both patterns are precise
and quote style is consistent.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 781f97fd-aa5b-4e20-9fab-0f7e33b495e1

📥 Commits

Reviewing files that changed from the base of the PR and between 1e79903 and 244d8d3.

📒 Files selected for processing (1)

• vite.config.ts

[LadyBluenotes]

Thank you for this fix!