{"id":22667,"library":"vite-plugin-federation","title":"Vite Plugin Federation","description":"A Vite plugin that enables Module Federation across Vite-based projects, allowing micro-frontends to share components, stores, and utilities at runtime. Current stable version is 0.0.4 (pre-release). Release cadence is rapid but untracked; the plugin is in early development. Key differentiators: native integration with Vite's dev server and build pipeline, support for Vite 5, 6, 7, and 8, and TypeScript-first design. Unlike Webpack Federation, this plugin leverages Vite's ESM-based module system for faster HMR and lighter builds. Requires Node >= 20.19.0 and Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 as peer dependencies. Currently in pre-release; API may change without notice.","status":"active","version":"0.0.4","language":"javascript","source_language":"en","source_url":"https://github.com/jskits/vite-plugin-federation","tags":["javascript","typescript"],"install":[{"cmd":"npm install vite-plugin-federation","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-federation","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-federation","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The export is named, not default. Common mistake: using default import.","wrong":"import federation from 'vite-plugin-federation'","symbol":"federation","correct":"import { federation } from 'vite-plugin-federation'"},{"note":"Type only import avoids bundling. Use with TypeScript.","wrong":"import { VitePluginFederationOptions } from 'vite-plugin-federation'","symbol":"VitePluginFederationOptions","correct":"import type { VitePluginFederationOptions } from 'vite-plugin-federation'"},{"note":"Available via type export for configuring expose property.","wrong":null,"symbol":"ExposeOptions","correct":"import type { ExposeOptions } from 'vite-plugin-federation'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport { federation } from 'vite-plugin-federation';\n\nexport default defineConfig({\n  plugins: [\n    federation({\n      name: 'my-host',\n      remotes: {\n        remote_app: 'http://localhost:3001/assets/remoteEntry.js',\n      },\n      shared: {\n        react: { singleton: true },\n        'react-dom': { singleton: true },\n      },\n    }),\n  ],\n});\n\n// In a component:\nimport('remote_app/Button').then(({ Button }) => {\n  // use Button\n});","lang":"typescript","description":"Shows basic setup with Vite config using federation plugin, defining a remote and sharing React as singleton."},"warnings":[{"fix":"Lock version to current minor and test upgrades carefully. Monitor GitHub releases.","message":"The plugin is in pre-release (v0.0.x). Breaking changes may occur with minor version bumps.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Expect and adapt to changes. Follow the repository for updates.","message":"API may change without prior notice; no stability guarantees.","severity":"deprecated","affected_versions":">=0.0.0"},{"fix":"Ensure your project uses Vite ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0.","message":"Requires Vite 5, 6, 7, or 8 as peer dependency. Using with Vite 4 will cause install errors.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Update Node.js to 20.19.0 or higher.","message":"Node.js >=20.19.0 required. Older Node versions may not work.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"npm install vite-plugin-federation --save-dev && ensure tsconfig includes 'moduleResolution': 'bundler' or 'node16'.","cause":"Package not installed or TypeScript not configured to resolve it.","error":"Cannot find module 'vite-plugin-federation' or its corresponding type declarations."},{"fix":"Use import { federation } from 'vite-plugin-federation' (ESM). If using require, use const { federation } = require('vite-plugin-federation').","cause":"Trying to use named import 'federation' but the package version might be CJS or the import style is wrong.","error":"Cannot import the named export 'federation' from non EcmaScript module (only default export is available)"},{"fix":"Verify the remote URL and ensure CORS headers are set on the remote server.","cause":"Remote entry URL is incorrect or CORS not configured.","error":"Uncaught TypeError: Failed to fetch dynamically imported module: /assets/remoteEntry.js"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}