Skip to content

fix(devtools): render the shared packages badge count once - #4970

Open
dmchoi77 wants to merge 1 commit into
module-federation:mainfrom
dmchoi77:fix/devtools-packages-badge-duplicate-count
Open

fix(devtools): render the shared packages badge count once#4970
dmchoi77 wants to merge 1 commit into
module-federation:mainfrom
dmchoi77:fix/devtools-packages-badge-duplicate-count

Conversation

@dmchoi77

@dmchoi77 dmchoi77 commented Aug 7, 2026

Copy link
Copy Markdown
Contributor

Description

The packages badge in the Shared Dependencies overview renders its count twice, so a scope holding a single shared package is displayed as "11 packages".

SharedDepsExplorer prints stats.totalPackages and then calls the packagesBadge translation, which already interpolates the same value through {{count}}:

// packages/chrome-devtools/src/component/SharedDepsExplorer/index.tsx
<span>
  {stats.totalPackages}
  {t('sharedDeps.stats.scopes.packagesBadge', { count: stats.totalPackages })}
</span>
// packages/chrome-devtools/src/i18n/index.ts
packagesBadge: '{{count}} packages'   // en
packagesBadge: '{{count}} 个包'        // zh-CN

So the badge renders 1 + 1 packages. Any count is affected — 33 packages reads as "3333 packages".

screenshot

This PR drops the extra JSX expression and lets the translation carry the count. The opposite fix (removing {{count}} from the translations) is not viable: the zh-CN string places the number before the classifier, so the count has to stay inside the translation for the word order to hold.

The other stat cards in the same row (totalProviders, totalScopes, totalVersions, loadedCount, reusedCount) render their value and label separately and are unaffected.

Related Issue

No existing issue — filing the context here instead.

This is a regression from #4305 (feat: devtools support dark mode, 813923c). That PR moved the hardcoded packages label into i18n but kept the JSX count:

-<span>{stats.totalPackages} packages</span>
+<span>
+  {stats.totalPackages}
+  {t('sharedDeps.stats.scopes.packagesBadge', {
+    count: stats.totalPackages,
+  })}
+</span>

Before #4305 the badge rendered {stats.totalPackages} packages, which is what this change restores.

Types of changes

  • Docs change / refactoring / dependency upgrade
  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)

Checklist

  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have updated the documentation.

@changeset-bot

changeset-bot Bot commented Aug 7, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 333fad2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 47 packages
Name Type
@module-federation/devtools Patch
@module-federation/runtime Patch
@module-federation/enhanced Patch
@module-federation/rspack Patch
@module-federation/webpack-bundler-runtime Patch
@module-federation/sdk Patch
@module-federation/runtime-tools Patch
@module-federation/managers Patch
@module-federation/manifest Patch
@module-federation/dts-plugin Patch
@module-federation/third-party-dts-extractor Patch
@module-federation/bridge-react Patch
@module-federation/bridge-vue3 Patch
@module-federation/bridge-shared Patch
@module-federation/bridge-react-webpack-plugin Patch
@module-federation/modern-js Patch
@module-federation/modern-js-v3 Patch
@module-federation/retry-plugin Patch
@module-federation/rsbuild-plugin Patch
@module-federation/error-codes Patch
@module-federation/inject-external-runtime-core-plugin Patch
@module-federation/runtime-core Patch
create-module-federation Patch
@module-federation/cli Patch
@module-federation/rspress-plugin Patch
@module-federation/treeshake-server Patch
@module-federation/treeshake-frontend Patch
@module-federation/metro Patch
@module-federation/metro-plugin-rnef Patch
@module-federation/metro-plugin-rock Patch
@module-federation/metro-plugin-rnc-cli Patch
@module-federation/esbuild Patch
@module-federation/nextjs-mf Patch
@module-federation/node Patch
@module-federation/observability-plugin Patch
@module-federation/playground Patch
website-new Patch
@module-federation/storybook-addon Patch
shared-tree-shaking-no-server-host Patch
shared-tree-shaking-no-server-provider Patch
@module-federation/utilities Patch
remote5 Patch
remote6 Patch
shared-tree-shaking-with-server-host Patch
shared-tree-shaking-with-server-provider Patch
node-dynamic-remote-new-version Patch
node-dynamic-remote Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits.
Repo admins can enable using credits for code reviews in their settings.

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.

1 participant