@jiayouzuo/module-federation-vite

Enhanced Vite plugin for Module Federation with automatic CSS injection support.

Features

• ✅ Full Module Federation support for Vite
• ✅ Auto CSS injection when bundleAllCSS: true is enabled
• ✅ CSS files are automatically loaded with remote modules
• ✅ Based on @module-federation/vite v1.9.4

Installation

npm install @jiayouzuo/module-federation-vite
# or
pnpm add @jiayouzuo/module-federation-vite
# or
yarn add @jiayouzuo/module-federation-vite

Usage

Replace @module-federation/vite with @jiayouzuo/module-federation-vite in your vite.config.ts:

import { defineConfig } from 'vite';
import { federation } from '@jiayouzuo/module-federation-vite';

export default defineConfig({
  plugins: [
    federation({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component.tsx',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
      bundleAllCSS: true,  // Enable auto CSS injection
      manifest: true,      // Required for CSS injection
    }),
  ],
});

What's Enhanced?

Auto CSS Injection

When bundleAllCSS: true and manifest: true are enabled, this plugin automatically:

1. Collects all CSS files from the bundle
2. Injects CSS loading code into remoteEntry.js
3. Uses import.meta.url to resolve CSS paths dynamically
4. Loads CSS files automatically when the remote module is loaded

Before (original plugin):

• CSS files are collected but not loaded
• Manual CSS imports required in every component
• CSS may not load correctly in production

After (this plugin):

• CSS files are automatically loaded with the remote module
• No manual CSS imports needed
• Works correctly in both development and production

Implementation Details

The plugin injects the following code into remoteEntry.js:

// Auto-inject CSS files (bundleAllCSS patch)
(function() {
  const cssFiles = ["style-hash.css"];
  const loadedCss = new Set();
  const baseUrl = import.meta.url.substring(0, import.meta.url.lastIndexOf('/'));
  cssFiles.forEach(cssFile => {
    if (loadedCss.has(cssFile)) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = baseUrl + '/' + cssFile;
    document.head.appendChild(link);
    loadedCss.add(cssFile);
  });
})();

Configuration

All configuration options from @module-federation/vite are supported. See the original documentation for details.

License

MIT

Credits

Based on @module-federation/vite by Giorgio Boa.