feat: upgrade NX to 21.2.3, Storybook to 9.0.9, and TypeScript to 5.8.3 (#3920)

Co-authored-by: Claude <noreply@anthropic.com>

Author: ScriptedAlchemy

.changeset/nx-upgrade-21-2-3.md

@@ -0,0 +1,36 @@
+---
+"@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/devtools": 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/retry-plugin": patch
+"@module-federation/data-prefetch": 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
+---
+
+chore: upgrade NX to 21.2.3, Storybook to 9.0.9, and TypeScript to 5.8.3
+
+- Upgraded NX from 21.0.3 to 21.2.3 with workspace configuration updates
+- Migrated Storybook from 8.3.5 to 9.0.9 with updated configurations and automigrations
+- Upgraded TypeScript from 5.7.3 to 5.8.3 with compatibility fixes
+- Fixed package exports and type declaration paths across all packages
+- Resolved module resolution issues and TypeScript compatibility problems
+- Updated build configurations and dependencies to support latest versions

.github/workflows/build-and-test.yml

@@ -55,9 +55,6 @@ jobs:
       - name: Print Number of CPU Cores
         run: nproc
 
-      - name: Warm Nx Cache
-        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache
-
       - name: Run Build for All
         run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4 --skip-nx-cache
 
@@ -75,6 +72,9 @@ jobs:
             fi
           done
 
+      - name: Warm Nx Cache
+        run: npx nx run-many --targets=build --projects=tag:type:pkg --parallel=4
+
       - name: Run Affected Test
         uses: nick-fields/retry@v3
         with:

apps/esbuild/package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build:remote": "node build/build-mfe1.js",
     "build:host": "node build/build-shell.js",
-    "build": "rm -rf ./node_modules/.cache && npm run build:remote && npm run build:host",
+    "build": "npm run build:remote && npm run build:host",
     "watch": "concurrently \"npm run build:remote -- --watch\" \"npm run build:host -- --watch\"",
     "start:remote": "live-server dist/mfe1 --port=3001 --cors",
     "start:host": "live-server dist/shell --port=3000",

apps/reactStorybook/.eslintrc.json

@@ -1,5 +1,9 @@
 {
-  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "extends": [
+    "plugin:@nx/react",
+    "../../.eslintrc.json",
+    "plugin:storybook/recommended"
+  ],
   "ignorePatterns": ["!**/*"],
   "overrides": [
     {

apps/reactStorybook/.storybook/main.js

@@ -1,22 +1,24 @@
+const { dirname, join } = require('node:path');
+
 const nxModuleFederationConfig = require('../module-federation.config');
 
 module.exports = {
   stories: ['../src/app/**/*.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
-    '@storybook/addon-essentials',
-    '@nx/react/plugins/storybook',
+    getAbsolutePath('@nx/react/plugins/storybook'),
     {
-      name: '@module-federation/storybook-addon',
+      name: getAbsolutePath('@module-federation/storybook-addon'),
       options: {
         nxModuleFederationConfig: { ...nxModuleFederationConfig },
       },
     },
-    '@chromatic-com/storybook',
+    getAbsolutePath('@chromatic-com/storybook'),
+    getAbsolutePath('@storybook/addon-docs'),
   ],
 
   framework: {
-    name: '@storybook/nextjs',
+    name: getAbsolutePath('@storybook/nextjs'),
     options: {},
   },
 
@@ -30,3 +32,7 @@ module.exports = {
 // To customize your webpack configuration you can use the webpackFinal field.
 // Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
 // and https://nx.dev/packages/storybook/documents/custom-builder-configs
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}

apps/reactStorybook/src/app/RemoteButton.stories.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Meta, Story } from '@storybook/react';
+import { Meta, Story } from '@storybook/nextjs';
 
 // @ts-ignore
 const LazyButton = React.lazy(() => import('reactRemoteUI/Button'));

apps/rslib-module/.storybook/main.ts

@@ -25,7 +25,7 @@ const config: StorybookConfig = {
       },
     },
     {
-      name: '@module-federation/storybook-addon/preset',
+      name: getAbsolutePath('@module-federation/storybook-addon/preset'),
       options: {
         remotes: {
           'rslib-module':

package.json

@@ -71,7 +71,6 @@
     }
   },
   "dependencies": {
-    "@storybook/addon-interactions": "8.6.12",
     "adm-zip": "0.5.16",
     "ansi-colors": "4.1.3",
     "antd": "5.19.1",
@@ -89,7 +88,7 @@
     "react-router-dom": "6.26.2",
     "regenerator-runtime": "0.14.1",
     "sharp": "^0.33.4",
-    "storybook": "8.3.5",
+    "storybook": "9.0.9",
     "tapable": "2.2.1",
     "typedoc": "0.25.8",
     "undici": "5.28.5",
@@ -107,24 +106,24 @@
     "@commitlint/cz-commitlint": "19.5.0",
     "@fontsource/roboto": "5.1.0",
     "@fontsource/roboto-mono": "5.1.0",
-    "@nx/cypress": "21.0.3",
-    "@nx/devkit": "21.0.3",
-    "@nx/esbuild": "21.0.3",
-    "@nx/eslint": "21.0.3",
-    "@nx/eslint-plugin": "21.0.3",
-    "@nx/express": "21.0.3",
-    "@nx/jest": "21.0.3",
-    "@nx/js": "21.0.3",
-    "@nx/module-federation": "21.0.3",
-    "@nx/next": "21.0.3",
-    "@nx/node": "21.0.3",
-    "@nx/react": "21.0.3",
-    "@nx/rollup": "21.0.3",
-    "@nx/rspack": "21.0.3",
-    "@nx/storybook": "21.0.3",
-    "@nx/vite": "21.0.3",
-    "@nx/web": "21.0.3",
-    "@nx/webpack": "21.0.3",
+    "@nx/cypress": "21.2.3",
+    "@nx/devkit": "21.2.3",
+    "@nx/esbuild": "21.2.3",
+    "@nx/eslint": "21.2.3",
+    "@nx/eslint-plugin": "21.2.3",
+    "@nx/express": "21.2.3",
+    "@nx/jest": "21.2.3",
+    "@nx/js": "21.2.3",
+    "@nx/module-federation": "21.2.3",
+    "@nx/next": "21.2.3",
+    "@nx/node": "21.2.3",
+    "@nx/react": "21.2.3",
+    "@nx/rollup": "21.2.3",
+    "@nx/rspack": "21.2.3",
+    "@nx/storybook": "21.2.3",
+    "@nx/vite": "21.2.3",
+    "@nx/web": "21.2.3",
+    "@nx/webpack": "21.2.3",
     "@pmmmwh/react-refresh-webpack-plugin": "0.5.15",
     "@rollup/plugin-alias": "5.1.1",
     "@rollup/plugin-replace": "6.0.1",
@@ -135,12 +134,7 @@
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^11.0.1",
     "@semantic-release/npm": "^11.0.0",
-    "@storybook/addon-essentials": "8.6.12",
-    "@storybook/core-common": "8.6.12",
-    "@storybook/core-server": "8.6.12",
-    "@storybook/nextjs": "8.6.12",
-    "@storybook/node-logger": "8.1.11",
-    "@storybook/react": "8.6.12",
+    "@storybook/nextjs": "9.0.9",
     "@svgr/webpack": "8.1.0",
     "@swc-node/register": "1.10.10",
     "@swc/cli": "0.6.0",
@@ -203,7 +197,7 @@
     "mime-types": "2.1.35",
     "msw": "^1.2.1",
     "node-fetch": "~3.3.2",
-    "nx": "21.0.3",
+    "nx": "21.2.3",
     "open": "^10.1.0",
     "postcss-calc": "9.0.1",
     "postcss-custom-properties": "13.3.12",
@@ -223,7 +217,7 @@
     "ts-jest": "29.1.5",
     "tslib": "2.8.1",
     "tsup": "7.3.0",
-    "typescript": "5.7.3",
+    "typescript": "5.8.3",
     "url-loader": "4.1.1",
     "verdaccio": "6.1.2",
     "vite": "6.3.5",
@@ -236,7 +230,9 @@
     "webpack-cli": "^5.1.4",
     "webpack-virtual-modules": "0.6.2",
     "whatwg-fetch": "^3.6.20",
-    "yargs": "^17.7.2"
+    "yargs": "^17.7.2",
+    "eslint-plugin-storybook": "9.0.9",
+    "@storybook/addon-docs": "9.0.17"
   },
   "config": {
     "commitizen": {

packages/bridge/bridge-react/src/lazy/data-fetch/runtime-plugin.ts

@@ -18,14 +18,14 @@ import {
 } from '../constant';
 
 import type { MF_DATA_FETCH_MAP_VALUE } from '../types';
-import type { FederationRuntimePlugin } from '@module-federation/runtime';
+import type { ModuleFederationRuntimePlugin } from '@module-federation/runtime';
 
-const autoFetchData: () => FederationRuntimePlugin = () => {
+const autoFetchData: () => ModuleFederationRuntimePlugin = () => {
   initDataFetchMap();
   injectDataFetch();
   return {
     name: 'auto-fetch-data-plugin',
-    afterLoadSnapshot(args) {
+    afterLoadSnapshot(args: any) {
       const { id, moduleInfo, remoteSnapshot, host } = args;
       if (typeof id === 'string' && isDataLoaderExpose(id)) {
         return args;
@@ -68,7 +68,7 @@ const autoFetchData: () => FederationRuntimePlugin = () => {
       const hasSSRAsset = Boolean(remoteSnapshot.ssrRemoteEntry);
       const hasDataFetchClient = Boolean(
         remoteSnapshot.modules.find(
-          (module) =>
+          (module: any) =>
             module.moduleName === `${dataFetchName}${DATA_FETCH_CLIENT_SUFFIX}`,
         ),
       );

packages/bridge/bridge-react/src/plugins/lazy-load-component-plugin.ts

@@ -1,6 +1,6 @@
 import type {
   ModuleFederation,
-  FederationRuntimePlugin,
+  ModuleFederationRuntimePlugin,
 } from '@module-federation/runtime';
 import {
   createLazyComponent,
@@ -24,7 +24,7 @@ declare module '@module-federation/runtime-core' {
   }
 }
 
-export function lazyLoadComponentPlugin(): FederationRuntimePlugin {
+export function lazyLoadComponentPlugin(): ModuleFederationRuntimePlugin {
   return {
     name: 'lazy-load-component-plugin',
     apply(instance: ModuleFederation) {