Skip to content

Conversation

@schiller-manuel
Copy link
Contributor

@schiller-manuel schiller-manuel commented Nov 2, 2025

fixes #5717

Summary by CodeRabbit

  • Chores
    • Updated build optimization to include additional transitive dependencies used by the form library, reducing the chance of missing modules in optimized builds.
    • Preserved existing exclusions and client/server behavior to maintain prior build stability.
    • Improves reliability of client-side builds that use the form and routing libraries.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 2, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

Adds conditional logic in the Vite plugin to include the transitive dependency @tanstack/react-store in optimizeDeps.include when @tanstack/react-form appears in optimizeDeps.exclude for client builds; existing exclude lists and server/client branching remain unchanged.

Changes

Cohort / File(s) Summary
Vite optimizeDeps configuration
packages/react-start/src/plugin/vite.ts
Add check for @tanstack/react-form inside optimizeDeps.exclude; if present and running for client, push the transitive entry @tanstack/react-form > @tanstack/react-store into optimizeDeps.include. Other optimizeDeps excludes and server/client branches unchanged.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    participant VitePlugin
    participant Config
    participant OptimizeDeps

    Note over VitePlugin,Config: Vite plugin build-time configuration
    VitePlugin->>Config: read optimizeDeps.exclude
    alt running in client
        Config->>VitePlugin: returns excludes
        alt '@tanstack/react-form' in excludes
            VitePlugin->>OptimizeDeps: add "@tanstack/react-form > @tanstack/react-store" to include
            OptimizeDeps-->>VitePlugin: include updated
        else
            VitePlugin-->>OptimizeDeps: leave include unchanged
        end
    else running in server
        VitePlugin-->>OptimizeDeps: keep include/exclude as server defaults
    end
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

  • Verify matching logic for detecting @tanstack/react-form in optimizeDeps.exclude.
  • Confirm correct placement (client-only) and exact transitive string format (@tanstack/react-form > @tanstack/react-store) for Vite.
  • Run a dev build or reproduce case from linked issue to ensure use-sync-external-store import error is resolved.

Possibly related PRs

Poem

🐰 I hopped through configs, nibbled at lines,
Found a store hiding in form-shaped vines.
With one small push the include grew near,
Now builds bloom bright and imports clear. 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The PR title "fix: optimizeDeps for react form" is specific and directly describes the main change in the pull request. The title clearly references the modification being made to the optimizeDeps configuration for react form dependencies, which is exactly what the code changes accomplish. It is concise, avoids vague terminology, and provides meaningful context that would help a teammate scanning the history understand the primary fix without being overly verbose.
Linked Issues Check ✅ Passed The code changes directly address the root cause identified in issue #5717, which describes an import error caused by the CommonJS-only use-sync-external-store dependency being incorrectly handled as ESM. The PR modifies the Vite configuration to conditionally include the '@tanstack/react-form > @tanstack/react-store' transitive dependency in optimizeDeps.include, which ensures Vite properly pre-bundles and converts CommonJS dependencies to ESM format. This fix resolves the SyntaxError about missing exports that users experienced after upgrading to v1.134.7, meeting the stated objective of allowing the module to load correctly without import/export errors.
Out of Scope Changes Check ✅ Passed All changes in the pull request are directly scoped to resolving the issue described in #5717. The modification to packages/react-start/src/plugin/vite.ts targets the Vite configuration specifically to handle the ESM/CommonJS conversion issue with the use-sync-external-store dependency. No extraneous changes, refactoring, or unrelated modifications are present in the changeset, and the alteration is narrowly focused on implementing the necessary fix to the optimizeDeps configuration.

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2a00e18 and 2be138c.

📒 Files selected for processing (1)
  • packages/react-start/src/plugin/vite.ts (1 hunks)

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

@nx-cloud
Copy link

nx-cloud bot commented Nov 2, 2025

View your CI Pipeline Execution ↗ for commit 2be138c

Command Status Duration Result
nx affected --targets=test:eslint,test:unit,tes... ✅ Succeeded 5m 21s View ↗
nx run-many --target=build --exclude=examples/*... ✅ Succeeded 1m 23s View ↗

☁️ Nx Cloud last updated this comment at 2025-11-02 01:12:38 UTC

@pkg-pr-new
Copy link

pkg-pr-new bot commented Nov 2, 2025

More templates

@tanstack/arktype-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/arktype-adapter@5726

@tanstack/directive-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/directive-functions-plugin@5726

@tanstack/eslint-plugin-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/eslint-plugin-router@5726

@tanstack/history

npm i https://pkg.pr.new/TanStack/router/@tanstack/history@5726

@tanstack/nitro-v2-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/nitro-v2-vite-plugin@5726

@tanstack/react-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router@5726

@tanstack/react-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-devtools@5726

@tanstack/react-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-router-ssr-query@5726

@tanstack/react-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start@5726

@tanstack/react-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-client@5726

@tanstack/react-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/react-start-server@5726

@tanstack/router-cli

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-cli@5726

@tanstack/router-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-core@5726

@tanstack/router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools@5726

@tanstack/router-devtools-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-devtools-core@5726

@tanstack/router-generator

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-generator@5726

@tanstack/router-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-plugin@5726

@tanstack/router-ssr-query-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-ssr-query-core@5726

@tanstack/router-utils

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-utils@5726

@tanstack/router-vite-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/router-vite-plugin@5726

@tanstack/server-functions-plugin

npm i https://pkg.pr.new/TanStack/router/@tanstack/server-functions-plugin@5726

@tanstack/solid-router

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router@5726

@tanstack/solid-router-devtools

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-devtools@5726

@tanstack/solid-router-ssr-query

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-router-ssr-query@5726

@tanstack/solid-start

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start@5726

@tanstack/solid-start-client

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-client@5726

@tanstack/solid-start-server

npm i https://pkg.pr.new/TanStack/router/@tanstack/solid-start-server@5726

@tanstack/start-client-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-client-core@5726

@tanstack/start-plugin-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-plugin-core@5726

@tanstack/start-server-core

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-server-core@5726

@tanstack/start-static-server-functions

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-static-server-functions@5726

@tanstack/start-storage-context

npm i https://pkg.pr.new/TanStack/router/@tanstack/start-storage-context@5726

@tanstack/valibot-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/valibot-adapter@5726

@tanstack/virtual-file-routes

npm i https://pkg.pr.new/TanStack/router/@tanstack/virtual-file-routes@5726

@tanstack/zod-adapter

npm i https://pkg.pr.new/TanStack/router/@tanstack/zod-adapter@5726

commit: 2a00e18

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (1)
packages/react-start/src/plugin/vite.ts (1)

82-86: Logic correctly fixes the CommonJS import issue.

This conditional inclusion of @tanstack/react-form > @tanstack/react-store mirrors the existing pattern at line 81 and correctly ensures that when users exclude @tanstack/react-form, the transitive dependency @tanstack/react-store is still optimized to convert its CommonJS dependency (use-sync-external-store) to ESM.

Consider using includes() instead of find() for a clearer intent:

-                  ...(options.optimizeDeps?.exclude?.find(
-                    (x) => x === '@tanstack/react-form',
-                  )
+                  ...(options.optimizeDeps?.exclude?.includes(
+                    '@tanstack/react-form',
+                  )
                     ? ['@tanstack/react-form > @tanstack/react-store']
                     : []),
📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0761f79 and 2a00e18.

📒 Files selected for processing (1)
  • packages/react-start/src/plugin/vite.ts (2 hunks)
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use TypeScript in strict mode with extensive type safety across the codebase

Files:

  • packages/react-start/src/plugin/vite.ts
packages/{*-start,start-*}/**

📄 CodeRabbit inference engine (AGENTS.md)

Name and place Start framework packages under packages/-start/ or packages/start-/

Files:

  • packages/react-start/src/plugin/vite.ts
🧠 Learnings (2)
📓 Common learnings
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/
📚 Learning: 2025-09-23T17:36:12.598Z
Learnt from: CR
Repo: TanStack/router PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-09-23T17:36:12.598Z
Learning: Applies to packages/{react-router,solid-router}/** : Implement React and Solid bindings/components only in packages/react-router/ and packages/solid-router/

Applied to files:

  • packages/react-start/src/plugin/vite.ts
🧬 Code graph analysis (1)
packages/react-start/src/plugin/vite.ts (1)
packages/start-plugin-core/src/constants.ts (1)
  • VITE_ENVIRONMENT_NAMES (1-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
  • GitHub Check: Test

@schiller-manuel schiller-manuel merged commit df15791 into main Nov 2, 2025
3 of 5 checks passed
@schiller-manuel schiller-manuel deleted the fix-5717 branch November 2, 2025 01:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@tanstack/react-start v1.134.7 causes import error with use-sync-external-store

2 participants