mf-shared-deps

Analyze Module Federation shared dependency configurations to detect and report conflicts.

2.6k|423|Updated Oct 24, 2020
One-click install
npx skills add https://github.com/module-federation/core --skill mf-shared-deps
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: mf-shared-deps
Source: https://github.com/module-federation/core/tree/main/skills/mf-shared-deps
Command: npx skills add https://github.com/module-federation/core --skill mf-shared-deps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps diagnose and resolve issues where shared dependencies in Module Federation setups are not being correctly shared, leading to duplicate library instances or runtime errors.

Core Features & Use Cases

  • Conflict Detection: Identifies conflicts between shared and externals configurations.
  • Transform Import Issues: Detects when UI libraries like Ant Design or Arco Design are shared but transformImport is enabled, blocking proper sharing.
  • Version Mismatches: Flags instances where multiple versions of the same shared package are present in build artifacts.
  • Use Case: When your host and remote applications load different versions of React, or when a shared component library fails to load due to sharing misconfiguration.

Quick Start

Run the mf-shared-deps skill with the project root as an argument to check for shared dependency conflicts.

Frequently Asked Questions about mf-shared-deps

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
Why are Module Federation shared dependencies causing duplicate library instances in my build artifacts?

Module Federation shared dependencies cause duplicate library instances when multiple versions of the same package exist in build artifacts or when sharing misconfigurations prevent proper deduplication. Analyzing shared dependency configurations helps detect these version mismatches and resolve runtime errors.

How do I debug Module Federation shared dependencies conflicting with webpack externals?

To debug Module Federation shared dependencies conflicting with webpack externals, analyze the shared dependency configurations to detect conflicts between shared and externals settings. This identifies misconfigurations blocking proper sharing and provides actionable guidance for resolution.

Does transformImport block UI library sharing in Module Federation micro-frontends?

Yes, transformImport blocks UI library sharing in Module Federation micro-frontends. When UI libraries like Ant Design or Arco Design are shared but transformImport is enabled, the setting prevents proper sharing. Detecting this transformImport issue resolves component library loading failures.

How do I detect multiple versions of the same shared package in webpack build artifacts?

To detect multiple versions of the same shared package in webpack build artifacts, analyze Module Federation shared dependency configurations to flag version mismatches. This identifies instances where different versions of packages like React are present and causing runtime conflicts.

What is the best way to resolve shared dependency conflicts in a Module Federation setup?

The best way to resolve shared dependency conflicts in a Module Federation setup is to analyze shared dependency configurations to detect conflicts with externals, transformImport blocking issues, and multiple package versions. This provides actionable guidance to fix duplicate library instances and runtime errors.

Can I check for shared dependency conflicts by passing a project root directory?

Yes, you can check for shared dependency conflicts by passing the project root directory as an argument. This analyzes the Module Federation shared dependency configurations within that root to detect and report conflicts, providing actionable guidance for resolution.