共有依存関係の設定
Module FederationのsharedオプションでホストアプリとリモートアプリがReactなどのライブラリを共有し、重複ダウンロードやバージョン競合を避ける方法を学びます。
「共有依存関係の設定」はCoddyKit上の無料Micro Frontends Architecture with Module Federationレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはMicro Frontends Architecture with Module Federation学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。
このレッスンの一部はまだ翻訳されておらず、英語で表示されています。
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
singletonon 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:
sharedavoids duplicate libraries across apps- Use the object form for per-package control
singletonis critical for React and React-DOMrequiredVersiondrives run-time negotiation- Use
eagerandstrictVersiondeliberately
Good sharing keeps federated apps fast and conflict-free.
よくある質問
「共有依存関係の設定」レッスンは無料ですか？
はい。「共有依存関係の設定」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Micro Frontends Architecture with Module Federationコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Micro Frontends Architecture with Module Federationコースには全4レッスンが含まれています。
「共有依存関係の設定」で何を学びますか？
Module FederationのsharedオプションでホストアプリとリモートアプリがReactなどのライブラリを共有し、重複ダウンロードやバージョン競合を避ける方法を学びます。 ブラウザで直接実行するハンズオンコードでMicro Frontends Architecture with Module Federationを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Micro Frontends Architecture with Module Federationを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのMicro Frontends Architecture with Module Federationは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「共有依存関係の設定」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このMicro Frontends Architecture with Module Federationレッスンでコードを書いて実行できますか？
はい。すべてのMicro Frontends Architecture with Module Federationレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。