feat(storybook)!: only ship ESM outputs, align with Storybook 10. (#4223)

Author: fi3ework

.changeset/real-squids-retire.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/storybook-addon': major
+---
+
+only ship ESM outputs, align with Storybook 10.

packages/storybook-addon/package.json

@@ -2,7 +2,7 @@
   "name": "@module-federation/storybook-addon",
   "version": "4.0.36",
   "description": "Storybook addon to consume remote module federated apps/components",
-  "type": "commonjs",
+  "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",

packages/storybook-addon/preset.ts

@@ -1,4 +1,4 @@
-import { withModuleFederation } from './src/utils/with-module-federation-enhanced-rsbuild';
+import { withModuleFederation } from './src/utils/with-module-federation-enhanced-rsbuild.js';
 
 import type { RsbuildConfig } from '@rsbuild/core';
 import type { moduleFederationPlugin } from '@module-federation/sdk';
@@ -18,4 +18,4 @@ export default {
     });
   },
 };
-export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild';
+export { PLUGIN_NAME } from './src/utils/with-module-federation-enhanced-rsbuild.js';

packages/storybook-addon/src/index.ts

@@ -1 +1 @@
-export * from './lib/storybook-addon';
+export * from './lib/storybook-addon.js';

packages/storybook-addon/src/lib/storybook-addon.spec.ts

@@ -1,4 +1,4 @@
-import { Preset, webpack } from './storybook-addon';
+import { Preset, webpack } from './storybook-addon.js';
 import { Configuration, container } from 'webpack';
 import VirtualModulesPlugin from 'webpack-virtual-modules';
 

packages/storybook-addon/src/lib/storybook-addon.ts

@@ -9,8 +9,8 @@ import {
 } from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { normalizeStories } from '@storybook/core/common';
-import withModuleFederation from '../utils/with-module-federation';
-import { correctImportPath } from '../utils/correctImportPath';
+import withModuleFederation from '../utils/with-module-federation.js';
+import { correctImportPath } from '../utils/correctImportPath.js';
 
 import type { moduleFederationPlugin } from '@module-federation/sdk';
 import type { ModuleFederationConfig } from '@nx/webpack';

packages/storybook-addon/src/utils/correctImportPath.spec.ts

@@ -1,4 +1,4 @@
-import { correctImportPath } from './correctImportPath';
+import { correctImportPath } from './correctImportPath.js';
 
 describe(`${correctImportPath.name}()`, () => {
   afterEach(() => {

packages/storybook-addon/src/utils/with-module-federation-enhanced-rsbuild.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
 import { TEMP_DIR } from '@module-federation/sdk';
 
-import { correctImportPath } from './correctImportPath';
+import { correctImportPath } from './correctImportPath.js';
 
 import type { RsbuildConfig, RsbuildPlugin } from '@rsbuild/core';
 import type { moduleFederationPlugin } from '@module-federation/sdk';

packages/storybook-addon/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "esnext",
     "forceConsistentCasingInFileNames": true,
     "strict": true,
     "noImplicitOverride": true,