0Pricing
Micro Frontends Architecture with Module Federation · Lección

Configuración de dependencias compartidas

Aprenda cómo la opción shared de Module Federation permite que las aplicaciones host y remotas compartan bibliotecas como React, evitando descargas duplicadas y conflictos de versiones.

Configuración de dependencias compartidas es una lección gratuita de Micro Frontends Architecture with Module Federation en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Micro Frontends Architecture with Module Federation, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

The Duplication Problem

Without coordination, a host and each remote would each bundle their own copy of React, Lodash, and other libraries. Users would download the same code many times.

The shared option solves this.

What shared Does

The shared key in ModuleFederationPlugin tells webpack which dependencies should be loaded once and reused across federated apps at run time.

Basic shared Syntax

The simplest form lists package names as an array. Webpack then negotiates a single shared instance at run time.

new ModuleFederationPlugin({
  name: "host",
  shared: ["react", "react-dom"]
});

Object Form for Options

The object form gives fine-grained control per dependency, such as marking it required or singleton.

shared: {
  react: { singleton: true, requiredVersion: "^18.0.0" },
  "react-dom": { singleton: true }
}

The singleton Option

singleton: true forces every app to use ONE instance of the library. This is essential for React, whose hooks break if two copies load at once.

requiredVersion and Negotiation

Each app declares a requiredVersion. At run time Module Federation picks the highest version that satisfies everyone. If versions are incompatible, it warns or falls back.

shared: {
  react: { singleton: true, requiredVersion: "^18.2.0" }
}

The eager Option

eager: true bundles the shared dependency into the initial chunk instead of loading it asynchronously. Useful for the host shell but increases initial bundle size.

shared: {
  react: { singleton: true, eager: true }
}

Reading from package.json

To avoid hardcoding versions, you can derive them from your dependencies, keeping shared config in sync with what you actually install.

const deps = require("./package.json").dependencies;
shared: {
  react: { singleton: true, requiredVersion: deps.react }
}

strictVersion

strictVersion: true makes Module Federation throw instead of falling back when no compatible version is found — surfacing mismatches early during testing.

Common Pitfalls

Watch out for:

  • Forgetting singleton on React, causing hook errors
  • Mismatched major versions across remotes
  • Overusing eager, bloating the first load

Verifying Sharing Works

Open the browser network tab: if React loads only once across host and remotes, sharing is working. The webpack build log also reports shared-module resolution.

Quick Check

Test your shared-dependency knowledge.

Recap

You configured shared dependencies:

  • shared avoids duplicate libraries across apps
  • Use the object form for per-package control
  • singleton is critical for React and React-DOM
  • requiredVersion drives run-time negotiation
  • Use eager and strictVersion deliberately

Good sharing keeps federated apps fast and conflict-free.

Preguntas frecuentes

¿La lección «Configuración de dependencias compartidas» es gratis?

Sí — el texto completo de «Configuración de dependencias compartidas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Micro Frontends Architecture with Module Federation, actualiza a CoddyKit PRO. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.

¿Qué aprenderé en «Configuración de dependencias compartidas»?

Aprenda cómo la opción shared de Module Federation permite que las aplicaciones host y remotas compartan bibliotecas como React, evitando descargas duplicadas y conflictos de versiones. Practicas Micro Frontends Architecture with Module Federation con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Micro Frontends Architecture with Module Federation?

No se requiere experiencia previa. Micro Frontends Architecture with Module Federation en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Configuración de dependencias compartidas»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Micro Frontends Architecture with Module Federation?

Sí. Cada lección de Micro Frontends Architecture with Module Federation incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Repaso de los fundamentos de Webpack
  2. Introducción a Module Federation
  3. Aplicaciones host y remotas
  4. Configuración de dependencias compartidas
← Volver a Micro Frontends Architecture with Module Federation