feat: add support for disabling imports for shared modules

- Add import flag to shareConfig interface and normalization
- Handle import: false modules in virtual remote entry generation
- Add e2e test

Author: pcfreak30

e2e/vite-webpack-rspack/tests/index.spec.ts

@@ -131,6 +131,32 @@ test.describe('Dynamic remote', () => {
     await expect(signUpBanner).toBeVisible();
     await expect(specialPromoBanner).not.toBeVisible();
   });
+
+  test('verifies shared lodash dependency', async ({ page, baseURL }) => {
+    await page.goto(baseURL!);
+    const showAdToggle = page.getByRole('checkbox', { name: 'Show Dynamic Ad', exact: true });
+
+    // Check that lodash version is displayed in SpecialPromo banner
+    await showAdToggle.check({ force: true });
+
+    const specialPromoBanner = page.getByRole('heading', { level: 2, name: 'Up to 50% off!', exact: true });
+    await expect(specialPromoBanner).toBeVisible();
+
+    const lodashVersionDisplay = page.getByTestId('lodash-version-display');
+    await expect(lodashVersionDisplay).toBeVisible();
+    const versionText = await lodashVersionDisplay.textContent();
+    expect(versionText).toMatch(/Shared lodash v\d+\.\d+\.\d+/);
+
+    // Toggle off and on again to check SignUpBanner
+    await showAdToggle.uncheck({ force: true });
+    await showAdToggle.check({ force: true });
+
+    const signUpBanner = page.getByRole('heading', { level: 2, name: 'Sign up now!', exact: true });
+    await expect(signUpBanner).toBeVisible();
+    await expect(lodashVersionDisplay).toBeVisible();
+    const versionText2 = await lodashVersionDisplay.textContent();
+    expect(versionText2).toMatch(/Shared lodash v\d+\.\d+\.\d+/);
+  });
 });
 
 test.describe('Tests remote', () => {

examples/vite-webpack-rspack/dynamic-remote/src/SignUpBanner.jsx

@@ -1,9 +1,12 @@
+import _ from 'lodash';
+
 const SignUpBanner = () => {
   return (
     <div className="bg-blue-500 text-white p-4 m-4 rounded ring-offset-ring-4 flex justify-between">
       <div>
         <h2 className="text-xl">Sign up now!</h2>
         <p>Get started with our amazing service today.</p>
+        <p data-testid="lodash-version-display">Shared lodash v{_.VERSION}</p>
         <button className="bg-white text-blue-500 p-2 rounded mt-2">Sign up</button>
       </div>
       <img src="https://picsum.photos/200/200" alt="Random" className="mt-2" />

examples/vite-webpack-rspack/dynamic-remote/src/SpecialPromo.jsx

@@ -1,8 +1,11 @@
+import _ from 'lodash';
+
 const SpecialPromo = () => {
   return (
     <div className="bg-red-500 text-white p-4 m-4 rounded ring-offset-ring-4 flex justify-between">
       <div>
         <h2 className="text-xl">Up to 50% off!</h2>
+        <p data-testid="lodash-version-display">Shared lodash v{_.VERSION}</p>
         <p>Only for a limited time.</p>
       </div>
       <img src="https://picsum.photos/200/200" alt="Random" className="mt-2" />

examples/vite-webpack-rspack/dynamic-remote/vite.config.js

@@ -14,7 +14,11 @@ export default defineConfig({
         './SignUpBanner': './src/SignUpBanner.jsx',
         './SpecialPromo': './src/SpecialPromo.jsx',
       },
-      shared: ['react', 'react-dom'],
+      shared: {
+        react: { singleton: true },
+        'react-dom': { singleton: true },
+        lodash: { singleton: true, import: false },
+      },
     }),
   ],
   server: {

examples/vite-webpack-rspack/host/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@module-federation/vite": "workspace:*",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },

examples/vite-webpack-rspack/host/src/App.tsx

@@ -7,6 +7,9 @@ import { Toggle } from './components/Toggle';
 import { useDynamicImport } from './hooks/useDynamicImport';
 import './index.css';
 
+import _ from 'lodash';
+_.VERSION;
+
 const RemoteProduct = lazy(
   () =>
     // @ts-ignore

examples/vite-webpack-rspack/host/vite.config.js

@@ -22,7 +22,7 @@ const mfConfig = {
       type: 'module',
     },
   },
-  shared: ['react', 'react-dom'],
+  shared: ['react', 'react-dom', 'lodash'],
 };
 
 // https://vitejs.dev/config/
@@ -38,5 +38,6 @@ export default defineConfig({
   ],
   build: {
     target: 'chrome89',
+    minify: false,
   },
 });

package.json

@@ -47,6 +47,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@module-federation/runtime": "^0.17.1",
+    "@module-federation/sdk": "^0.18.3",
     "@rollup/pluginutils": "^5.1.0",
     "defu": "^6.1.4",
     "estree-walker": "^2",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 import { SharedConfig, ShareStrategy } from '@module-federation/runtime/types';
+import type { sharePlugin } from '@module-federation/sdk';
 
 export type RemoteEntryType =
   | 'var'
@@ -104,7 +105,7 @@ export interface ShareItem {
   version: string | undefined;
   scope: string;
   from: string;
-  shareConfig: SharedConfig;
+  shareConfig: SharedConfig & sharePlugin.SharedConfig;
 }
 
 function removePathFromNpmPackage(packageString: string): string {
@@ -157,6 +158,7 @@ function normalizeShareItem(
     | string
     | {
         name: string;
+        import: sharePlugin.SharedConfig['import'];
         version?: string;
         shareScope?: string;
         singleton?: boolean;
@@ -192,6 +194,7 @@ function normalizeShareItem(
       scope: 'default',
       from: '',
       shareConfig: {
+        import: undefined,
         singleton: false,
         requiredVersion: version ? `^${version}` : '*',
       },
@@ -203,6 +206,7 @@ function normalizeShareItem(
     version: shareItem.version || version,
     scope: shareItem.shareScope || 'default',
     shareConfig: {
+      import: typeof shareItem === 'object' ? shareItem.import : undefined,
       singleton: shareItem.singleton || false,
       requiredVersion: shareItem.requiredVersion || (version ? `^${version}` : '*'),
       strictVersion: !!shareItem.strictVersion,
@@ -289,6 +293,7 @@ export type ModuleFederationOptions = {
             singleton?: boolean;
             requiredVersion?: string;
             strictVersion?: boolean;
+            import?: sharePlugin.SharedConfig['import'];
           }
       >
     | undefined;