[Feature Request]: Support for Webpack in Framework Mode for Micro-Frontend Architecture

[coolRoger]

Hi there! 👋

I'm exploring the new Framework Mode in React Router v7 and I'm really excited about its potential for building micro-frontend architectures. However, I noticed that the documentation currently only mentions Vite as the supported build tool for this mode.

From a micro-frontend perspective, Webpack offers several advantages that make it better suited for complex enterprise applications, such as:

1. More mature module federation implementation
2. Better support for legacy codebases
3. Rich ecosystem of loaders and plugins for handling diverse asset types
4. Advanced code splitting and chunking strategies
5. Fine-grained control over the build process

While Vite is a great tool, many organizations (including mine) have significant investments in Webpack-based tooling and infrastructure. It would be incredibly helpful if React Router's Framework Mode could support Webpack as well.

Could the team consider adding support for Webpack in Framework Mode or providing a tutorial on how to integrate React Router v7's Framework Mode with Webpack? This would enable more developers to take advantage of this feature without having to migrate their entire build pipeline.

Thank you for considering this request! Let me know if you need more information about specific use cases or requirements.

[sergiodxa]

There's a RSPack plugin for RR maintained by the RSPack team focused on supporting micro-frontends

[DallasCarraher]

@coolRoger you can still use vite but until the @module-federation/vite plugin has proper ssr support, I've been doing the following:

React Router "Framework Mode" (SSR) w/ module federation

The @module-federation/vite plugin is designed primarily for CSR (client-side rendering) apps and has known compatibility issues with SSR frameworks like React Router in framework mode.

The Fix: Use @module-federation/runtime Directly

use @module-federation/runtime directly on the client side. This bypasses SSR completely since MF is only initialized and used in browser code.

Result:

SSR (Server)

React renders normally
No MF plugin interference
Remote component returns
placeholder/fallback

Client (Browser)

MF runtime initializes
Remotes registered
loadRemote() fetches remote
Component renders

---

How to implement

1. Install Runtime Dependency

npm install @module-federation/runtime

2. Initialize MF Runtime in Client Entry module

Create or update app/entry.client.tsx:

import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { HydratedRouter } from "react-router/dom";
import { init } from "@module-federation/runtime";

// Initialize Module Federation runtime BEFORE hydration
init({
  name: "host",
  remotes: [
    {
      name: "remote1",
      alias: "remote1",
      entry: "http://localhost:5001/assets/remoteEntry.js",
    },
  ],
  shared: {
    react: {
      lib: () => import("react"),
      singleton: true,
      requiredVersion: "^19.0.0",
    },
    "react-dom": {
      lib: () => import("react-dom"),
      singleton: true,
      requiredVersion: "^19.0.0",
    },
  },
});

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <HydratedRouter />
    </StrictMode>
  );
});

3. Create a Client-Only Wrapper for Remote Components

app/components/RemoteButton.tsx:

import { loadRemote } from "@module-federation/runtime";
import { lazy, Suspense, useEffect, useState, type ComponentType } from "react";

interface ButtonProps {
  children: React.ReactNode;
  onClick?: () => void;
}

// Lazy load using runtime API
const RemoteButtonComponent = lazy(async () => {
  const module = await loadRemote<{ default: ComponentType<ButtonProps> }>(
    "remote1/Button"
  );
  if (!module) {
    throw new Error("Failed to load remote Button component");
  }
  return { default: module.default };
});

export function RemoteButton(props: ButtonProps) {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  // SSR: render a placeholder
  if (!isMounted) {
    return <button disabled style={{ opacity: 0.5 }}>{props.children}</button>;
  }

  // Client: render the actual remote component
  return (
    <Suspense fallback={<button disabled>Loading...</button>}>
      <RemoteButtonComponent {...props} />
    </Suspense>
  );
}

---

Why This Works

With Plugin (Broken)	Runtime-Only (Working)
Plugin hijacks all shared imports	No build-time transformation
Creates CJS virtual modules	Pure ESM throughout
Breaks Vite SSR evaluation	SSR works normally
require is not defined errors	No SSR interference

---

Trade-offs

• ⚠️ Remote components won't be SSR'd (they render a placeholder during SSR)
• ⚠️ Slightly slower first load (manifest fetched at runtime)
• ⚠️ Remote URL configuration moves from build-time to runtime

---

Summary

The @module-federation/vite plugin has fundamental incompatibilities with SSR frameworks. The runtime-only approach sidesteps these issues by:

1. Not using the Vite plugin at all
2. Initializing MF only in client code (entry.client.tsx)
3. Using loadRemote() with proper client-side guards
4. Rendering fallbacks during SSR

This is currently the most reliable way to use Module Federation with React Router in framework mode until the MF Vite plugin gains proper SSR support.