build: reinstate ESM browser builds by skirtles-code · Pull Request #2572 · vuejs/router

skirtles-code · 2025-10-16T03:42:46Z

vue-router.esm-browser.js and vue-router.esm-browser.prod.js are missing from Vue Router 4.6.0. This PR brings them back.

These files are used when importing directly from a CDN.

It is possible to use vue-router.mjs directly in the browser, but it requires polyfills. vue-router.esm-browser.js removes references to process.env and __VUE_PROD_DEVTOOLS__, so it can be used without those polyfills.

vue-router.esm-browser.prod.js has dev-only code removed, is minified, and has no dependency on @vue/devtools-api.

Summary by CodeRabbit

New Features
- Added browser-targeted ESM bundles for direct use in modern browsers and CDNs.
- Included both a development build (with development flags enabled) and a minified production build (development flags disabled) for optimized performance.
- Improves flexibility for loading the router without bundlers and enhances compatibility with ESM-based workflows.

netlify · 2025-10-16T03:42:52Z

✅ Deploy Preview for vue-router canceled.

Name	Link
🔨 Latest commit	`df4444b`
🔍 Latest deploy log	https://app.netlify.com/projects/vue-router/deploys/68f069b93ba6c20008d457b3

coderabbitai · 2025-10-16T03:42:56Z

Walkthrough

Added two new build configurations, esmBrowser and esmBrowserProd, derived from esm, adjusting output filenames, dev flags, and minification. Updated the default export array to include these configurations alongside existing esm, cjs, and iife builds.

Changes

Cohort / File(s)	Summary
Build configurations `packages/router/tsdown.config.ts`	Added `esmBrowser` (ESM for browsers, `dist/vue-router.esm-browser.js`, DEV true) and `esmBrowserProd` (minified, `dist/vue-router.esm-browser.prod.js`, DEV false). Included both in the exported build configs array (order: esm, esmBrowser, esmBrowserProd, cjs, cjsProd, iife, iifeProd).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

I nudge new builds with whiskered care,
Two browser paths now scent the air—
One for play, one sleek for prod,
Hops between flags I softly prod.
In dist I leave my tiny trace,
ESM crumbs for every place. 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "build: reinstate ESM browser builds" directly aligns with the main change in the changeset. The PR modifies the tsdown.config.ts file to add two new build configurations (esmBrowser and esmBrowserProd) that restore the missing ESM browser build outputs for Vue Router, which is exactly what the title describes. The title is concise, clear, specific, and uses conventional commit message formatting with the "build:" prefix. It effectively communicates the primary purpose of the change without unnecessary verbosity or vague terminology.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 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 4dd6544 and df4444b.

📒 Files selected for processing (1)

packages/router/tsdown.config.ts (2 hunks)

⏰ 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: build

🔇 Additional comments (4)

packages/router/tsdown.config.ts (4)

66-78: LGTM! Correct pattern for ESM browser dev build.

The configuration correctly:

Sets hardcoded boolean string values for __DEV__ and __FEATURE_PROD_DEVTOOLS__ instead of using process.env or __VUE_PROD_DEVTOOLS__, enabling direct browser usage without polyfills

Follows the same pattern as the iife dev build (lines 131-132)

Uses dir: undefined with file for single-file output

80-92: LGTM! Correct pattern for ESM browser production build.

The configuration correctly:

Extends esmBrowser and enables minification for production

Sets both dev flags to 'false' as hardcoded strings for browser compatibility

With __FEATURE_PROD_DEVTOOLS__: 'false', tree-shaking will remove unused @vue/devtools-api code, achieving the "no dependency on @vue/devtools-api" goal stated in the PR objectives

150-159: LGTM! Logical build configuration ordering.

The new configurations are properly added to the export array with logical grouping: ESM builds (esm, esmBrowser, esmBrowserProd), followed by CJS builds, then IIFE builds.

66-92: Browser build verification must be performed in your local environment or CI/CD pipeline.

The requested verification cannot be completed in the sandbox environment (which lacks compilers and build tooling). Before merging, please confirm locally that:

The ESM browser builds (dist/vue-router.esm-browser.js and dist/vue-router.esm-browser.prod.js) compile successfully and can be imported directly in browsers

The production build contains no process.env or @vue/devtools-api references

The __DEV__ and __FEATURE_PROD_DEVTOOLS__ constants are correctly replaced during the build

Run your build command and inspect the output files to verify these conditions hold.

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

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

pkg-pr-new · 2025-10-16T03:43:22Z

Open in StackBlitz

npm i https://pkg.pr.new/vue-router@2572

commit: df4444b

codecov · 2025-10-16T03:44:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 91.02%. Comparing base (4dd6544) to head (df4444b).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2572   +/-   ##
=======================================
  Coverage   91.02%   91.02%           
=======================================
  Files          46       46           
  Lines        4179     4179           
  Branches     1111     1111           
=======================================
  Hits         3804     3804           
  Misses        368      368           
  Partials        7        7

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

posva

Thanks a lot!

build: reinstate ESM browser builds

df4444b

posva approved these changes Oct 16, 2025

View reviewed changes

posva merged commit 09d63d3 into vuejs:main Oct 16, 2025
9 checks passed

chouchouji mentioned this pull request Oct 16, 2025

更改 vue-router 的导入写法，以便适应 vue-router 在未来 v5 版本内，更改文件导出格式所带来的破坏性变更 dcloudio/uni-app#5824

Open

coderabbitai bot mentioned this pull request Dec 10, 2025

Make the production build output compatible with v4.5 #2591

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

build: reinstate ESM browser builds#2572

build: reinstate ESM browser builds#2572
posva merged 1 commit intovuejs:mainfrom
skirtles-code:esm-browser

skirtles-code commented Oct 16, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

netlify bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Oct 16, 2025

Uh oh!

codecov bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

posva left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

skirtles-code commented Oct 16, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

netlify bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vue-router canceled.

Uh oh!

coderabbitai bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new bot commented Oct 16, 2025

Uh oh!

codecov bot commented Oct 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

posva left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

skirtles-code commented Oct 16, 2025 •

edited by coderabbitai bot

Loading

netlify bot commented Oct 16, 2025 •

edited

Loading

coderabbitai bot commented Oct 16, 2025 •

edited

Loading

codecov bot commented Oct 16, 2025 •

edited

Loading