Skip to content

build(deps-dev): upgrade to Vite 8 and @vitejs/plugin-react 6#382

Merged
dcalhoun merged 3 commits intotrunkfrom
build/upgrade-to-vite-8
Mar 23, 2026
Merged

build(deps-dev): upgrade to Vite 8 and @vitejs/plugin-react 6#382
dcalhoun merged 3 commits intotrunkfrom
build/upgrade-to-vite-8

Conversation

@dcalhoun
Copy link
Copy Markdown
Member

@dcalhoun dcalhoun commented Mar 17, 2026

What?

Upgrade Vite from v7 to v8 and @vitejs/plugin-react from v5 to v6.

Supersedes #373 and #380.

Why?

Vite 8 replaces esbuild and Rollup with Rolldown and Oxc, the new Rust-based build toolchain. This keeps us on the latest major version and unblocks upgrading @vitejs/plugin-react to v6, which was required by the Dependabot PR.

How?

Dependency changes (package.json)

  • vite: ^7.3.1^8.0.0
  • @vitejs/plugin-react: ^5.1.4^6.0.1
  • Removed vite-plugin-node-polyfills (does not support Vite 8, and was replaced by a lighter approach)

Replace vite-plugin-node-polyfills with resolve stubs (vite.config.js, src/stubs/node-modules.js)

PostCSS imports Node.js modules (path, fs, url, source-map-js) that don't exist in browsers. PostCSS marks these as false in its browser field, but @wordpress/block-editor imports PostCSS via direct file paths (e.g., postcss/lib/processor), bypassing that field and causing Vite to emit "Module has been externalized for browser compatibility" warnings.

The vite-plugin-node-polyfills plugin suppressed these by providing full browser polyfills (~600 KB in dependencies), but PostCSS never actually calls these modules at runtime—it guards usage behind Boolean() checks. A single empty stub module aliased via resolve.alias achieves the same result with zero bundle impact and no external dependencies.

Patch mousetrap global-bind plugin (patches/mousetrap+1.6.5.patch)

Vite 8's Rolldown bundler may reorder side-effect imports relative to value imports (rolldown/rolldown#6436, vitejs/vite#5142). This caused mousetrap's global-bind plugin to execute before the main mousetrap module, so window.Mousetrap was not yet set and bindGlobal was never added to the prototype—breaking @wordpress/keyboard-shortcuts.

The patch adds a require("mousetrap") fallback so the plugin resolves Mousetrap via the module system instead of relying on the global. This is preferred over Rolldown's output.strictExecutionOrder option, which would increase bundle size by injecting runtime helpers across the entire bundle.

Testing Instructions

  1. Run the dev server (make dev-server) and verify the editor loads without errors in the browser console.
  2. Run make build and verify it completes successfully.
  3. Run make test-js and verify all tests pass.
  4. Test with plugins that register keyboard shortcuts (e.g., Jetpack AI Assistant1) and verify no mousetrap[bindGlobal] errors appear.

Accessibility Testing Instructions

N/A, no user-facing changes.

Footnotes

  1. Requires adding a site to the demo app that has an active Jetpack connection—e.g., WoW/Atomic.

@dcalhoun dcalhoun added the [Type] Build Tooling Issues or PRs related to build tooling label Mar 17, 2026
@dcalhoun dcalhoun marked this pull request as ready for review March 17, 2026 20:48
@dcalhoun dcalhoun requested a review from kean March 17, 2026 20:48
@dcalhoun dcalhoun force-pushed the build/upgrade-to-vite-8 branch from 2ffa7cc to ef17c3b Compare March 17, 2026 21:15
dcalhoun and others added 3 commits March 23, 2026 10:11
Upgrade vite from v7.3.1 to v8.0.0 and @vitejs/plugin-react from v5.1.4
to v6.0.1. Remove vite-plugin-node-polyfills, which does not yet support
Vite 8.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace vite-plugin-node-polyfills with resolve.alias stubs for path, fs,
url, and source-map-js. These modules are imported by PostCSS, which
@wordpress/block-editor loads via direct file paths (e.g.,
postcss/lib/processor), bypassing PostCSS's browser field. The stubs
silence Vite's "externalized for browser compatibility" warnings without
shipping real polyfills.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Vite 8 replaces Rollup with Rolldown, which may reorder side-effect
imports relative to value imports (rolldown/rolldown#6436,
vitejs/vite#5142). This causes mousetrap's global-bind plugin IIFE to
execute before the main mousetrap module, so `window.Mousetrap` is not
yet set and the `typeof Mousetrap` check fails. As a result,
`bindGlobal` is never added to the prototype, breaking
`@wordpress/keyboard-shortcuts`.

The patch adds a `require("mousetrap")` fallback so the plugin resolves
Mousetrap via the module system instead of relying on the global
variable. This is preferred over Rolldown's `output.strictExecutionOrder`
option, which would increase bundle size by injecting runtime helpers
across the entire bundle.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@dcalhoun dcalhoun force-pushed the build/upgrade-to-vite-8 branch from ef17c3b to 4354568 Compare March 23, 2026 14:14
@dcalhoun
Copy link
Copy Markdown
Member Author

@kean friendly reminder to review this. No worries if you simply need more time due to other priorities. Let me know if you have any questions.

Copy link
Copy Markdown
Contributor

@kean kean left a comment

Choose a reason for hiding this comment

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

LGTM!

@dcalhoun dcalhoun merged commit 4c113a0 into trunk Mar 23, 2026
15 checks passed
@dcalhoun dcalhoun deleted the build/upgrade-to-vite-8 branch March 23, 2026 18:28
dcalhoun added a commit that referenced this pull request Mar 24, 2026
* build(deps-dev): upgrade vite to v8 and @vitejs/plugin-react to v6

Upgrade vite from v7.3.1 to v8.0.0 and @vitejs/plugin-react from v5.1.4
to v6.0.1. Remove vite-plugin-node-polyfills, which does not yet support
Vite 8.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: stub Node.js modules imported by PostCSS

Replace vite-plugin-node-polyfills with resolve.alias stubs for path, fs,
url, and source-map-js. These modules are imported by PostCSS, which
@wordpress/block-editor loads via direct file paths (e.g.,
postcss/lib/processor), bypassing PostCSS's browser field. The stubs
silence Vite's "externalized for browser compatibility" warnings without
shipping real polyfills.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix: patch mousetrap global-bind plugin for Vite 8 compatibility

Vite 8 replaces Rollup with Rolldown, which may reorder side-effect
imports relative to value imports (rolldown/rolldown#6436,
vitejs/vite#5142). This causes mousetrap's global-bind plugin IIFE to
execute before the main mousetrap module, so `window.Mousetrap` is not
yet set and the `typeof Mousetrap` check fails. As a result,
`bindGlobal` is never added to the prototype, breaking
`@wordpress/keyboard-shortcuts`.

The patch adds a `require("mousetrap")` fallback so the plugin resolves
Mousetrap via the module system instead of relying on the global
variable. This is preferred over Rolldown's `output.strictExecutionOrder`
option, which would increase bundle size by injecting runtime helpers
across the entire bundle.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Type] Build Tooling Issues or PRs related to build tooling

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants