[examples] Align dependency versions with the rest of the repo by LukasTy · Pull Request #4436 · mui/base-ui

LukasTy · 2026-03-25T09:16:23Z

Follow-up on #4400.

Tip

Would it make more sense to not ignore examples/ folder in renovate so that these don't go out of sync?
cc @mui/infra

Summary

Bump dependencies in tanstack-start-tailwind-css and vite-css examples to match repo-wide versions (TanStack Router/Start, Tailwind CSS, ESLint, TypeScript, lucide-react, etc.)
Remove standalone pnpm-lock.yaml from the tanstack-start-tailwind-css example — the root lockfile is sufficient
Replace vite-tsconfig-paths plugin with Vite's built-in resolve.tsconfigPaths option and remove the now-unused dependency
Add notFoundComponent to the TanStack Start root route to suppress the missing route warning
Add suppressHydrationWarning on the <html> element to avoid noisy console warnings caused by browser extensions (facebook/react#24430)

pkg-pr-new · 2026-03-25T09:17:36Z

base-ui-tanstack-start

vite-css-base-ui-example

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/react@4436

pnpm add https://pkg.pr.new/mui/base-ui/@base-ui/utils@4436

commit: da0dbb5

mui-bot · 2026-03-25T09:18:34Z

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui/react	0B^(0.00%)	0B^(0.00%)

Details of bundle changes

Check out the code infra dashboard for more information about this PR.

netlify · 2026-03-25T09:20:39Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`da0dbb5`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/69d043d6754691000899bb2a
😎 Deploy Preview	https://deploy-preview-4436--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

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

LukasTy · 2026-03-25T09:30:25Z

Doesn't look relevant, actually; it's a disturbance. 🙈
cc @mj12albert

…sions

LukasTy · 2026-03-25T09:54:26Z

    tailwindcss(),
  ],
+  resolve: {
+    tsconfigPaths: true,


After vite bump it was warning that vite-tsconfig-paths is no longer necessary

LukasTy · 2026-03-25T09:55:17Z

  }),

  shellComponent: RootDocument,
+  notFoundComponent: () => <p>Page not found</p>,


Was complaining that this route doesn't exist

LukasTy · 2026-03-25T09:55:52Z

  return (
-    <html lang="en">
+    // Use suppressHydrationWarning to avoid https://github.com/facebook/react/issues/24430
+    <html lang="en" suppressHydrationWarning>


Very noisy console after updates when opening started application on a browser with extensions (no warning in incognito window).

LukasTy · 2026-03-25T10:08:33Z

Claude Opus 4.6 review

Overall

Clean, well-scoped maintenance PR. Most changes are correct and straightforward. A few items worth addressing before merge.

Issues

1. Stale comment in `vite.config.ts` (bug)

examples/tanstack-start-tailwind-css/vite.config.ts:10-11:

// this is the plugin that enables path aliases
tanstackStart(),

This comment originally described the removed viteTsConfigPaths() plugin. It now incorrectly attributes path alias support to tanstackStart(). Path aliases are now handled by resolve.tsconfigPaths: true on line 16. The comment should either be removed or moved/rewritten to describe the new resolve option.

2. `devDependencies` sort order broken (nit)

examples/tanstack-start-tailwind-css/package.json:26-39: eslint (line 30) appears before @types/node (line 31). Alphabetically, @types/* entries should come before eslint. The original file had proper sorting — removing vite-tsconfig-paths shifted things. This will likely cause a prettier --check / sort-package-json failure or at minimum inconsistency with the rest of the repo.

Expected order:

"@tanstack/eslint-config": "^0.4.0",
"@types/node": "22.18.13",
"@types/react": "^19",
"@types/react-dom": "^19",
"@vitejs/plugin-react": "^6.0.1",
"eslint": "^10.1.0",

Observations (no action needed)

3. `@types/node` pinned without caret — intentional

"@types/node": "22.18.13" (no ^) matches the root package.json which also pins this exact version (and enforces it via resolutions). Consistent with monorepo policy.

4. Lockfile removal is correct

examples/ is included in pnpm-workspace.yaml, so the standalone pnpm-lock.yaml in the tanstack example was redundant — the root lockfile governs all workspace packages.

5. `resolve.tsconfigPaths` is valid

Confirmed present in Vite 8 type definitions. This is the idiomatic replacement for vite-tsconfig-paths in Vite 8+. The tsconfig at examples/tanstack-start-tailwind-css/tsconfig.json defines paths (@/* → ./src/*), so this option is load-bearing.

6. `suppressHydrationWarning` and `notFoundComponent` — good additions

Both are standard TanStack Start best practices. The linked React issue (facebook/react#24430) is the canonical reference for browser-extension-induced hydration mismatches.

7. Examples use `^` ranges for shared deps while root pins exact versions

e.g., "react": "^19" in examples vs "react": "19.2.4" in root. This is fine — examples are meant to be standalone-reproducible, and ^19 is what a user would write. The workspace hoisting ensures they resolve to the monorepo's pinned version anyway.

Verdict

Approve with minor changes — fix the stale comment (#1) and optionally the sort order (#2).

Janpot · 2026-03-25T10:29:04Z

Would it make more sense to not ignore examples/ folder in renovate so that these don't go out of sync?
cc @mui/infra

Good question. I believe in core the idea was to define those with very wide version https://github.com/mui/material-ui/blob/master/examples/material-ui-express-ssr/package.json#L9.

michaldudak · 2026-03-25T10:58:30Z

@Janpot, do you see any advantages of this approach? If someone were to use these examples to start a new project, they would likely want more specific dependency versions anyway.

LukasTy · 2026-03-25T11:12:17Z

Good question. I believe in core the idea was to define those with very wide version https://github.com/mui/material-ui/blob/master/examples/material-ui-express-ssr/package.json#L9.

That's a less maintenance approach, but one that I fear could introduce the most unexpected issues without us noticing. 🙈
For example, we had latest as date library dependencies in MUI X only to see sandboxes broken once date-fns released a major version with BCs.

brijeshb42 · 2026-03-25T11:17:29Z

Either way (with latest or specific version ranges), there's no guarantee that a particular example will continue to work unless we add a CI job that builds all the examples. This doesn't happen in core neither here.

Janpot · 2026-03-25T11:35:16Z

@Janpot, do you see any advantages of this approach?

I think the idea is that we don't want to spend a lot of time on maintaining these examples and keeping their versions up-to-date. And so this method was introduced to prevent end-users from accidentally outdated and potentially insecure versions. A potential compromise could also be to "pin" them to their major (e.g. "6"). cc @oliviertassinari if you have more context.

LukasTy · 2026-04-01T15:36:16Z

I want to merge this to fix the broken examples.
Let's proceed and discuss potential follow-ups.
Are there any blockers?

brijeshb42

LGTM in the short term

LukasTy added 4 commits March 25, 2026 10:24

[examples] Align dependency versions with the rest of the repo

150a24c

Bump tanstack deps

e01959b

Remove no longer relevant dep

6eba523

Remove unused lock file

caf5034

LukasTy self-assigned this Mar 25, 2026

LukasTy added examples Relating to /examples. scope: code-infra Involves the code-infra product (https://www.notion.so/mui-org/5562c14178aa42af97bc1fa5114000cd). labels Mar 25, 2026

LukasTy commented Mar 25, 2026

View reviewed changes

LukasTy added 2 commits March 25, 2026 11:52

Add not found route as it warns about this

52be807

Suppress hydration warnings to avoid noisy console with certain exten…

84bfe5a

…sions

LukasTy commented Mar 25, 2026

View reviewed changes

Address code review comments

451bc5d

LukasTy marked this pull request as ready for review March 25, 2026 10:12

LukasTy requested review from atomiks, flaviendelangle and michaldudak as code owners March 25, 2026 10:12

LukasTy requested review from a team and mj12albert March 25, 2026 10:12

brijeshb42 approved these changes Apr 1, 2026

View reviewed changes

github-actions Bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 3, 2026

michaldudak approved these changes Apr 3, 2026

View reviewed changes

LukasTy added 2 commits April 4, 2026 01:40

Merge branch 'master' into deps/align-examples-deps

25b7916

Sync versions

da0dbb5

github-actions Bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Apr 3, 2026

LukasTy merged commit d15bc0a into mui:master Apr 3, 2026
23 checks passed

LukasTy deleted the deps/align-examples-deps branch April 3, 2026 23:11

Uh oh!

Conversation

LukasTy commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Uh oh!

pkg-pr-new Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mui-bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

netlify Bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

LukasTy Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

LukasTy Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

LukasTy Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

LukasTy Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

LukasTy commented Mar 25, 2026

Claude Opus 4.6 review

Overall

Issues

1. Stale comment in vite.config.ts (bug)

2. devDependencies sort order broken (nit)

Observations (no action needed)

3. @types/node pinned without caret — intentional

4. Lockfile removal is correct

5. resolve.tsconfigPaths is valid

6. suppressHydrationWarning and notFoundComponent — good additions

7. Examples use ^ ranges for shared deps while root pins exact versions

Verdict

Uh oh!

Janpot commented Mar 25, 2026

Uh oh!

michaldudak commented Mar 25, 2026

Uh oh!

LukasTy commented Mar 25, 2026

Uh oh!

brijeshb42 commented Mar 25, 2026

Uh oh!

Janpot commented Mar 25, 2026

Uh oh!

LukasTy commented Apr 1, 2026

Uh oh!

brijeshb42 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

LukasTy commented Mar 25, 2026 •

edited

Loading

pkg-pr-new Bot commented Mar 25, 2026 •

edited

Loading

mui-bot commented Mar 25, 2026 •

edited

Loading

netlify Bot commented Mar 25, 2026 •

edited

Loading

1. Stale comment in `vite.config.ts` (bug)

2. `devDependencies` sort order broken (nit)

3. `@types/node` pinned without caret — intentional

5. `resolve.tsconfigPaths` is valid

6. `suppressHydrationWarning` and `notFoundComponent` — good additions

7. Examples use `^` ranges for shared deps while root pins exact versions