Micro Frontends in NextJS with Webpack 5

Micro frontends

<div
  style={{
    display: "flex",
    justifyContent: "center",
    marginBlockStart: "var(--geist-space-medium)",
  }}
>
  <ErrorBoundary>
    <MfeButton label={"a label prop"} />
    <Stack direction="column">
      <div
        style={{
          marginLeft: "var(--geist-gap)",
          marginTop: "var(--geist-gap)",
        }}
      >
        <TreeMfe>
          <FolderMfe name="app2" defaultOpen>
            <FolderMfe name="src" defaultOpen>
              <FolderMfe name="FileTree">
                <FileMfe name="DepthContext.ts" />
                <FileMfe name="file-tree-icons.tsx" />
                <FileMfe name="File.tsx" />
                <FileMfe name="filetree.module.css" />
                <FileMfe name="Folder.tsx" />
                <FileMfe name="Tree.tsx" />
              </FolderMfe>
              <FileMfe name="App.js" />
              <FileMfe name="bootstrap.js" />
              <FileMfe name="Button.js" />
              <FileMfe name="Button.module.css" />
              <FileMfe name="declaration.d.ts" />
            </FolderMfe>
            <FileMfe name="package-lock.json" />
            <FileMfe name="package.json" />
            <FileMfe name="tsconfig.json" />
            <FileMfe name="webpack.config.js" />
          </FolderMfe>
        </TreeMfe>
      </div>
      <footer>👆 Here are a few live micro frontends!</footer>
    </Stack>
  </ErrorBoundary>
</div>

I won't go in depth in to what they are (the topic is pretty broad and there are more qualified resources out there), but rather how to add a micro frontend into a NextJS application. To set the mood, here’s an attempt at a brief history recap around web applications and when micro frontends popped up.

Timeline

2000’s

For the most part, web applications have typically been built as monolithic apps leveraging a framework like Rails or Django. Early Twitter, Instagram, and Github are some examples.

2011

Then micro services came into the picture to try and solve organizational problems at scale like enabling greater team autonomy, and some technical issues like improved fault isolation and scalability.

"Microservices" themselves premiered at an event for software architects in 2011, where the term was used to describe a style of architecture that many attendees were experimenting with at the time. Netflix and Amazon were among the early pioneers of microservices.

2013

React was introduced which paved the way for performant client side web applications, and inevitably, monolithic frontends.

2016

ThoughtWorks began assessing a new technique known as "micro frontends" to gain similar benefits that microservices offered, but for the front end.

Read: https://martinfowler.com/articles/micro-frontends.html

2020

Webpack 5 was released and its Module Federation feature has opened the doors to new possibilities in the relatively young micro frontend paradigm.

Micro frontends in a NextJS app

So micro frontends have actually been around for a while now and have been implemented in various ways. One of the newer and exciting additions to the ecosystem is Webpack 5 and its module federation feature.

Note: I may use the terms "micro frontend" and "federated module" interchangeably.

Requirements

To implement a micro frontend in a NextJS app, you’ll need be on NextJS 10 or higher, and you’ll need a federated module.

The micro frontend (aka federated module)

My particular micro frontend — a simple button — is a minimally modified fork of the official module-federation bi-directional example.

It’s built then drag 'n' dropped into a public AWS S3 bucket as a quick 'n' easy proof of concept. The bulk of the magic happens in the webpack.config.js with the ModuleFederationPlugin.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");
const deps = require("./package.json").dependencies;

module.exports = {
  entry: "./src/index",
  mode: "development",
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    port: 3002,
  },
  output: {
    publicPath: "auto",
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: "ts-loader",
        include: path.resolve(__dirname, "src"),
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        loader: "babel-loader",
        exclude: /node_modules/,
        options: {
          presets: ["@babel/preset-react"],
        },
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "app2",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button",
        "./Tree": "./src/FileTree/Tree",
        "./Folder": "./src/FileTree/Folder",
        "./File": "./src/FileTree/File",
      },
      shared: [
        {
          ...deps,
          react: {
            // eager: true,
            singleton: true,
            requiredVersion: deps.react,
          },
          "react-dom": {
            // eager: true,
            singleton: true,
            requiredVersion: deps["react-dom"],
          },
        },
      ],
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
  ],
};

The name, filename, and exposes fields are important as they will be referenced from the consuming application.

The application

NextJS 10 10 comes with Webpack 5 as an experimental feature that you can enable with a feature flag.

NextJS 11 comes with Webpack 5 by default, with zero config

Install NextJS 10+

yarn add next@latest

Set the future.webpack5 flag to true in next.config.js, and push a new ModuleFederationPlugin to the plugins list.

 module.exports = {
   // if on Next 10...
+  future: {
+    webpack5: true,
+  },
   // if on Next 11...
+  webpack5: true, // true by default, so you can technically omit this
   webpack(config, options):  {
     /** Webpack 5 */
     console.log(options.webpack.version);

+    const { ModuleFederationPlugin } = options.webpack.container;

+    config.plugins.push(
+      new ModuleFederationPlugin({
+        remotes: {
+          app2: "app2@https://kevinmfe.s3.amazonaws.com/app2/dist/remoteEntry.js",
+        },
+        shared: [],
+      })
+    );

     return config;
   }
 }

The remotes field is what allows the consuming application to import a federated module. The name and filename values from the federated module are used here:

• {someKey}: {name}@domain/path/to/{file}

Implementation

To import a federated module, you can use the dynamic helper. Any modules that were included in the exposes field in the federated module can be used in the import path:

• {someKey}/{exposes.Button|exposes.SomeModule|etc.}

import dynamic from "next/dynamic";

// This behaves more or less the same with React.lazy()
// and <React.Suspense>, or react-loadable

const MfeButton = dynamic(
  async () => {
    // Sleep, for demoing purposes
    await new Promise((res) => setTimeout(res, 1500));
    // @ts-ignore
    return await import("app2/Button");
  },
  {
    ssr: false,
    loading: ({ error }) => {
      if (error) {
        return <Error label={error.name}>{error.message}</Error>;
      }
      return <Skeleton></Skeleton>;
    },
  },
);

// This is how I'm actually using it with `next-mdx-remote`:
const mdxComponents = {
  MfeButton: dynamic(() => import("app2/Button"), {
    ssr: false,
    loading: () => <Skeleton></Skeleton>,
  }),
};

export default function MyPage() {
  return <MfeButton label={"a label prop"} />;
}

Here is a diagram of the actual micro frontend implementation on this site. For now, the architecture is very basic, but could easily be extended to include things like a dedicated CloudFront distribution for the micro frontend bucket, a Lambda@Edge to server side render the micro frontend, or an Api Gateway for individual micro frontend data requirements.

Takeaways

This is a proof of concept for how easy it is to integrate a federated module / micro frontend into a NextJS application. Despite being an overly simple example, it was a fun exploratory project to go through.

With that being said, there was an initial mental hump that was a bit difficult to get over, likely because I didn't realize how broad the topic/pattern of micro frontends was. Webpack 5 and module federation only make up a tiny chunk of the topic.

The Webpack 5 ecosystem is still in infant stages, and the biggest source of knowledge seems to be blog posts by adventurous early adopters. Stack Overflow posts around the topic are also very limited. 😐

Things I still want to explore firsthand are

• shared react state management across multiple unrelated micro frontends
• creating a micro frontend in a different framework, like Vue, Angular, or React Native Web
• importing said micro frontend
• server side rendering federated modules
• data fetching from individual federated modules
• successfully render a tree of multiple federated React function components that use state hooks
• successfully render a tree of multiple federated React stateful class components

Caveats

Static type checking is lost with the dynamic importing of federated modules. However, I can see this being solved by publishing static types to npm.

As of this post and the settings shown, I can't seem to get a sane working example of a federated React component that uses a hook, and it seems to be an inherent incompatibility/limitation between ModuleFederationPlugin and some NextJS inner workings.

react.development.js:1476 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

I've tried multiple options, including some custom loading components, and have successfully rendered a single-depth component that uses a useState hook, but the solution was too convoluted to maintain IMO. The ecosystem is still very immature so I'm hoping for more official patterns around this to come out soon.

See: https://stackoverflow.com/questions/63942391/webpack-5-module-federation-hooks-in-remote-module-not-working

Debugging

In the browser console, you can run this to check for the existence of a federated module.

window.app2.get("./Button").then(factory => factory()).then(mod => console.log(mod))

Module {__esModule: true, Symbol(Symbol.toStringTag): "Module"} ℹ️
  default: (...)
  Symbol(Symbol.toStringTag): "Module"
  __esModule: true
▶️ get default: ()=>a
▶️ __proto__: Object