Code Challenge: Debug the Micro-frontend

Overview

This repo is a Webpack Module Federation micro-frontend app made up of three independent sub-projects:

App	Port	Role
container	8080	Shell — composes the other two
products	8081	Remote — renders a product list
cart	8082	Remote — renders a cart summary

The container loads the products and cart remotes at runtime using Module Federation.

Setup

Install dependencies and start each app in a separate terminal:

# Terminal 1
cd container && npm install && npm start

# Terminal 2
cd products && npm install && npm start

# Terminal 3
cd cart && npm install && npm start

Then open http://localhost:8080 in your browser.

The Challenge

The cart module federation name has been changed from its original value to "cart".

When you open the container at http://localhost:8080, you will see the following runtime error in the browser console:

Uncaught (in promise) TypeError: fn is not a function
    while loading "./CartShow" from webpack/container/reference/cart
        at handleFunction (main.js)
        at onInitialized (main.js)

The products remote loads fine. Only the cart remote fails.

Your task: find and fix the root cause.

Rules

• You may inspect and modify any file in the repo
• No external libraries or tools required — this is a pure config/code bug
• The fix should be minimal (no need to restructure the project)

Hints

Hint 1

The error originates inside Webpack's Module Federation runtime, specifically when it tries to call external.get('./CartShow'). What does external resolve to?

Hint 2

The Module Federation runtime identifies a remote by looking up a global variable on window. The global variable name comes from the name field in the remote's webpack.config.js. Try logging window.cart in the browser console before the error occurs.

Hint 3

Browsers automatically expose any HTML element that has an id attribute as a property on window. So <div id="cart"> means window.cart === document.getElementById("cart").

Solution

The container's public/index.html has:

<div id="cart"></div>

Browsers automatically create window.cart = <div> for any element with an id. When the Module Federation runtime checks typeof cart !== "undefined", it finds the DOM node — not the real remote container — and skips loading remoteEntry.js entirely. It then tries to call .get() on a HTMLDivElement, which doesn't have that method, causing fn is not a function.

The same issue does not affect the products remote because its MF global name is "products" (plural) while the HTML id is "product" (singular) — no collision.

Fix: rename the HTML id so it does not match the MF global name. For example:

<!-- container/public/index.html -->
<div id="dev-cart"></div>

And update the selector in cart/src/index.js and cart/public/index.html to match.

Key Concepts

• Webpack Module Federation
• HTML named access on Window — the browser spec that causes this collision