Skip to content

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

Open
dcalhoun wants to merge 3 commits intotrunkfrom
build/upgrade-to-vite-8
Open

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

Conversation

@dcalhoun
Copy link
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 and others added 3 commits March 17, 2026 16:14
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 2ffa7cc to ef17c3b Compare March 17, 2026 21:15
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.

1 participant