Complete dual ESM+CJS setup for remaining packages

Co-authored-by: ScriptedAlchemy <25274700+ScriptedAlchemy@users.noreply.github.com>

Author: Copilot

packages/storybook-addon/package.json

@@ -2,8 +2,11 @@
  "name": "@module-federation/storybook-addon",
  "version": "4.0.27",
  "description": "Storybook addon to consume remote module federated apps/components",
- "type": "commonjs",
+ "type": "module",
  "license": "MIT",
+ "main": "./dist/index.cjs.cjs",
+ "module": "./dist/index.esm.js",
+ "types": "./dist/index.d.ts",
  "repository": {
  "type": "git",
  "url": "https://github.com/module-federation/core/",
@@ -25,16 +28,16 @@
  "README.md"
  ],
  "author": "Fiodorov Andrei <hello@fyodorovandrei.com> (https://github.com/fyodorovandrei)",
- "main": "dist/src/index.js",
- "types": "dist/src/index.d.ts",
  "exports": {
  ".": {
- "types": "./dist/src/index.d.ts",
- "default": "./dist/src/index.js"
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.esm.js",
+ "require": "./dist/index.cjs.cjs"
  },
  "./preset": {
  "types": "./dist/preset.d.ts",
- "default": "./dist/preset.js"
+ "import": "./dist/preset.esm.js",
+ "require": "./dist/preset.cjs.cjs"
  },
  "./*": "./*"
  },

packages/storybook-addon/project.json

@@ -7,13 +7,22 @@
  "implicitDependencies": ["utils"],
  "targets": {
  "build": {
- "executor": "@nx/js:tsc",
- "outputs": ["{options.outputPath}"],
+ "executor": "@nx/rollup:rollup",
+ "outputs": ["{workspaceRoot}/packages/storybook-addon/dist"],
  "options": {
+ "parallel": false,
  "outputPath": "packages/storybook-addon/dist",
  "main": "packages/storybook-addon/src/index.ts",
+ "additionalEntryPoints": ["packages/storybook-addon/preset.ts"],
  "tsConfig": "packages/storybook-addon/tsconfig.lib.json",
- "assets": ["packages/storybook-addon/*.md"]
+ "assets": [],
+ "external": ["@module-federation/*"],
+ "project": "packages/storybook-addon/package.json",
+ "compiler": "swc",
+ "rollupConfig": "packages/storybook-addon/rollup.config.cjs",
+ "format": ["cjs", "esm"],
+ "generatePackageJson": false,
+ "useLegacyTypescriptPlugin": false
  },
  "dependsOn": [
  {

packages/storybook-addon/rollup.config.cjs

@@ -0,0 +1,60 @@
+const copy = require('rollup-plugin-copy');
+
+module.exports = (rollupConfig, _projectOptions) => {
+ rollupConfig.input = {
+ index: 'packages/storybook-addon/src/index.ts',
+ preset: 'packages/storybook-addon/preset.ts',
+ };
+
+ rollupConfig.plugins.push(
+ copy({
+ targets: [
+ { src: 'packages/storybook-addon/README.md', dest: 'packages/storybook-addon/dist' },
+ { src: 'packages/storybook-addon/LICENSE', dest: 'packages/storybook-addon/dist' },
+ ],
+ }),
+ );
+
+ rollupConfig.external = [
+ /@module-federation/,
+ /@storybook/,
+ /@rsbuild/,
+ /@nx/,
+ 'webpack',
+ 'webpack-virtual-modules',
+ ];
+
+ if (Array.isArray(rollupConfig.output)) {
+ rollupConfig.output = rollupConfig.output.map((c) => ({
+ ...c,
+ hoistTransitiveImports: false,
+ entryFileNames:
+ c.format === 'cjs'
+ ? c.entryFileNames.replace('.js', '.cjs')
+ : c.entryFileNames,
+ chunkFileNames:
+ c.format === 'cjs'
+ ? c.chunkFileNames.replace('.js', '.cjs')
+ : c.chunkFileNames,
+ ...(c.format === 'cjs' ? { externalLiveBindings: false } : {}),
+ }));
+ } else {
+ rollupConfig.output = {
+ ...rollupConfig.output,
+ hoistTransitiveImports: false,
+ entryFileNames:
+ rollupConfig.output.format === 'cjs'
+ ? rollupConfig.output.entryFileNames.replace('.js', '.cjs')
+ : rollupConfig.output.entryFileNames,
+ chunkFileNames:
+ rollupConfig.output.format === 'cjs'
+ ? rollupConfig.output.chunkFileNames.replace('.js', '.cjs')
+ : rollupConfig.output.chunkFileNames,
+ ...(rollupConfig.output.format === 'cjs'
+ ? { externalLiveBindings: false }
+ : {}),
+ };
+ }
+
+ return rollupConfig;
+};

packages/utilities/package.json

@@ -1,7 +1,8 @@
 {
  "name": "@module-federation/utilities",
  "version": "3.1.66",
- "main": "./dist/index.cjs.js",
+ "type": "module",
+ "main": "./dist/index.cjs.cjs",
  "module": "./dist/index.esm.js",
  "types": "./dist/index.d.ts",
  "license": "MIT",
@@ -44,7 +45,7 @@
  ".": {
  "types": "./dist/index.d.ts",
  "import": "./dist/index.esm.js",
- "require": "./dist/index.cjs.js"
+ "require": "./dist/index.cjs.cjs"
  },
  "./package.json": "./package.json"
  },

packages/utilities/project.json

@@ -30,6 +30,7 @@
  "additionalEntryPoints": ["packages/utilities/src/types/types.ts"],
  "external": ["@module-federation/*"],
  "compiler": "swc",
+ "rollupConfig": "packages/utilities/rollup.config.cjs",
  "format": ["cjs", "esm"],
  "generatePackageJson": false,
  "useLegacyTypescriptPlugin": false

packages/utilities/rollup.config.cjs

@@ -0,0 +1,48 @@
+const copy = require('rollup-plugin-copy');
+
+module.exports = (rollupConfig, _projectOptions) => {
+ rollupConfig.plugins.push(
+ copy({
+ targets: [
+ { src: 'packages/utilities/README.md', dest: 'packages/utilities/dist' },
+ { src: 'packages/utilities/LICENSE', dest: 'packages/utilities/dist' },
+ ],
+ }),
+ );
+
+ rollupConfig.external = [/@module-federation/];
+
+ if (Array.isArray(rollupConfig.output)) {
+ rollupConfig.output = rollupConfig.output.map((c) => ({
+ ...c,
+ hoistTransitiveImports: false,
+ entryFileNames:
+ c.format === 'cjs'
+ ? c.entryFileNames.replace('.js', '.cjs')
+ : c.entryFileNames,
+ chunkFileNames:
+ c.format === 'cjs'
+ ? c.chunkFileNames.replace('.js', '.cjs')
+ : c.chunkFileNames,
+ ...(c.format === 'cjs' ? { externalLiveBindings: false } : {}),
+ }));
+ } else {
+ rollupConfig.output = {
+ ...rollupConfig.output,
+ hoistTransitiveImports: false,
+ entryFileNames:
+ rollupConfig.output.format === 'cjs'
+ ? rollupConfig.output.entryFileNames.replace('.js', '.cjs')
+ : rollupConfig.output.entryFileNames,
+ chunkFileNames:
+ rollupConfig.output.format === 'cjs'
+ ? rollupConfig.output.chunkFileNames.replace('.js', '.cjs')
+ : rollupConfig.output.chunkFileNames,
+ ...(rollupConfig.output.format === 'cjs'
+ ? { externalLiveBindings: false }
+ : {}),
+ };
+ }
+
+ return rollupConfig;
+};