feat: add support for disabling imports for shared modules (#330)

- 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/package.json

@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@module-federation/vite": "workspace:*",
+    "lodash": "^4.17.21",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "@module-federation/vite": "workspace:*"
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

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

@@ -46,7 +46,8 @@
   "homepage": "https://github.com/module-federation/vite#readme",
   "packageManager": "pnpm@9.1.3",
   "dependencies": {
-    "@module-federation/runtime": "^0.17.1",
+    "@module-federation/runtime": "^0.18.3",
+    "@module-federation/sdk": "^0.18.3",
     "@rollup/pluginutils": "^5.1.0",
     "defu": "^6.1.4",
     "estree-walker": "^2",