@module-federation/nextjs-mf NPM

Module Federation For Next.js

This plugin enables Module Federation on Next.js

This is a workaround to hard limitations caused by Next.js being synchronous.

I am working on an update to Webpack Core which will circumvent projects with older architecture (like Next.js).

This is a stable and viable workaround to leverage Module Federation until this issue is resolved.

Supports

next ^9.5.6
SSG
SSR

Once I PR webpack, this workaround will no longer be required.

Check out our book

	We will be actively updating this book over the next year as we learn more about best practices and what issues people are running into with Module Federation, as well as with every release of Webpack as it moves towards a release candidate and release. So with your one purchase you are buying a whole year of updates.

Demo

You can see it in action here: https://github.com/module-federation/module-federation-examples/tree/master/nextjs

How to use it

Install Next ^9.5.6 (currently in canary)
Use withModuleFederation in your next.config.js

// next.config.js
const {
  withModuleFederation,
} = require("@module-federation/nextjs-mf");
const path = require("path");

module.exports = {
  webpack: (config, options) => {
    const { buildId, dev, isServer, defaultLoaders, webpack } = options;
    const mfConf = {
      name: "next2",
      library: { type: config.output.libraryTarget, name: "next2" },
      filename: "static/runtime/remoteEntry.js",
      remotes: {
        // For SSR, resolve to disk path (or you can use code streaming if you have access)
        next1: isServer
          ? path.resolve(
              __dirname,
              "../next1/.next/server/static/runtime/remoteEntry.js"
            )
          : "next1", // for client, treat it as a global
      },
      exposes: {
        "./nav": "./components/nav",
      },
      shared: ["lodash"],
    };
    // Configures ModuleFederation and other Webpack properties
    withModuleFederation(config, options, mfConf);

    if (!isServer) {
      config.output.publicPath = "http://localhost:3001/_next/";
    }

    return config;
  },
};

Add the patchSharing to _document.js. This will solve the react sharing issue.

import Document, { Html, Head, Main, NextScript } from "next/document";
import { patchSharing } from "@module-federation/nextjs-mf";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        {patchSharing()}
        <script src="http://localhost:3000/_next/static/chunks/webpack.js" />
        <script src="http://localhost:3000/_next/static/runtime/remoteEntry.js" />
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Use top-level-await

// some-component.js
const Nav = (await import("../components/nav")).default;
const _ = await import("lodash");

Experimental

Use at your own risk.

Next.js uses runtimeChunk:'single' Which forces us to also add the webpack script itself. Till this is fixed in webpack, heres a plugin that will merge the runtimes back together for MF

const {MergeRuntime} = require("@module-federation/nextjs-mf");
// in your next config.
config.plugins.push(new MergeRuntime());

This allows the following to be done

  - <script src="http://localhost:3000/_next/static/chunks/webpack.js" />
  - <script src="http://localhost:3000/_next/static/runtime/remoteEntry.js" />
  + <script src="http://localhost:3000/_next/static/remoteEntryMerged.js" />

fast-glob webpack-sources eventemitter3 @module-federation/utilities @module-federation/runtime @module-federation/sdk @module-federation/enhanced @module-federation/node @module-federation/webpack-type

@infinitebrahmanuniverse/nolb-_mod @everything-registry/sub-chunk-613 @nidhi-panchal13/next-mf @nidhi-panchal13/tiny @timbel-net/nextjs-mf @calvinorg/khoros-aurora-sdk-test @chorton-becn/bcp-poc-frontend-footer-microfrontend @zalastax/nolb-_mod remote-app khoros-aurora-sdk member-plugin memberssss nextjs-common-utils

0.0.0-next-20240508024041

2 days ago

8.3.13

3 days ago

0.0.0-next-20240504082822

5 days ago

8.3.12

11 days ago

0.0.0-next-20240429010049

11 days ago

0.0.0-next-20240429033452

10 days ago

0.0.0-next-20240428095629

11 days ago

0.0.0-next-20240428094837

11 days ago

0.0.0-next-20240426220915

13 days ago

0.0.0-next-20240425094203

14 days ago

8.3.11

14 days ago

0.0.0-next-20240425091022

14 days ago

0.0.0-next-20240425010938

15 days ago

0.0.0-next-20240425095630

14 days ago

0.0.0-next-20240424224724

15 days ago

0.0.0-next-20240425095041

14 days ago

8.3.10

16 days ago

0.0.0-next-20240422214156

17 days ago

0.0.0-next-20240422225306

17 days ago

0.0.0-next-20240423035511

16 days ago

0.0.0-next-20240422222512

17 days ago

0.0.0-next-20240419222037

20 days ago

0.0.0-next-20240419064104

20 days ago

0.0.0-next-20240419203425

20 days ago

0.0.0-next-20240418224727

21 days ago

0.0.0-next-20240419054235

20 days ago

8.3.9

20 days ago

0.0.0-next-20240419034211

20 days ago

0.0.0-next-20240418220407

21 days ago

0.0.0-next-20240417205114

22 days ago

8.3.8

22 days ago

0.0.0-next-20240415222600

24 days ago

0.0.0-next-20240415102546

24 days ago

8.3.6

24 days ago

8.3.7

24 days ago

0.0.0-next-20240415101817

24 days ago

0.0.0-next-20240415100944

24 days ago

0.0.0-next-20240412091739

27 days ago

0.0.0-next-20240412182228

27 days ago

0.0.0-next-20240412180247

27 days ago

0.0.0-next-20240412103714

27 days ago

8.3.5

26 days ago

0.0.0-next-20240411115459

28 days ago

0.0.0-next-20240411081414

28 days ago

0.0.0-next-20240411125344

28 days ago

0.0.0-next-20240408215115

1 month ago

0.0.0-next-20240409202851

30 days ago

0.0.0-next-20240409025309

1 month ago

0.0.0-next-20240409213838

30 days ago

8.3.4

30 days ago

0.0.0-next-20240408213752

1 month ago

0.0.0-next-20240409191512

30 days ago

0.0.0-next-20240408040658

1 month ago

0.0.0-next-20240404164914

1 month ago

0.0.0-next-20240404165651

1 month ago

0.0.0-next-20240402045522

1 month ago

0.0.0-next-20240401210655

1 month ago

0.0.0-next-20240402175026

1 month ago

8.3.2

1 month ago

8.3.3

1 month ago

0.0.0-next-20240402071000

1 month ago

0.0.0-next-20240402000503

1 month ago

0.0.0-next-20240403162201

1 month ago

0.0.0-next-20240401122911

1 month ago

0.0.0-next-20240403002421

1 month ago

0.0.0-next-20240402191904

1 month ago

0.0.0-next-20240401084119

1 month ago

0.0.0-next-20240401040901

1 month ago

0.0.0-next-20240401073754

1 month ago

0.0.0-next-20240401022607

1 month ago

0.0.0-next-20240330232226

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

0.0.0-next-20240326031522

1 month ago

0.0.0-next-20240326102030

1 month ago

0.0.0-next-20240326081159

1 month ago

0.0.0-next-20240326061945

1 month ago

0.0.0-next-20240325110954

2 months ago

0.0.0-next-20240325084555

2 months ago

0.0.0-next-20240325072950

2 months ago

0.0.0-next-20240322034056

2 months ago

0.0.0-next-20240324060529

2 months ago

0.0.0-next-20240324073358

2 months ago

0.0.0-next-20240324082735

2 months ago

0.0.0-next-20240324084915

2 months ago

0.0.0-next-20240324091053

2 months ago

0.0.0-next-20240325035415

2 months ago

0.0.0-next-20240324065321

2 months ago

0.0.0-next-20240325030531

2 months ago

0.0.0-next-20240321102113

2 months ago

0.0.0-next-20240321142841

2 months ago

0.0.0-next-20240321124455

2 months ago

0.0.0-next-20240318085858

2 months ago

0.0.0-next-20240318082152

2 months ago

0.0.0-next-20240318072254

2 months ago

0.0.0-next-20240318094510

2 months ago

0.0.0-next-20240318025655

2 months ago

8.2.4

2 months ago

8.2.3

2 months ago

0.0.0-next-20240311023539

2 months ago

0.0.0-next-20240310052320

2 months ago

8.2.2

2 months ago

0.0.0-next-20240309014600

2 months ago

8.2.1

2 months ago

0.0.0-next-20240308074028

2 months ago

0.0.0-next-20240308070801

2 months ago

0.0.0-next-20240307075509

2 months ago

0.0.0-next-20240307100534

2 months ago

0.0.0-next-20240307082121

2 months ago

0.0.0-next-20240307111914

2 months ago

8.2.0

2 months ago

0.0.0-next-20240306224838

2 months ago

0.0.0-next-20240306064226

2 months ago

0.0.0-next-20240306063912

2 months ago

8.1.11

2 months ago

0.0.0-next-20240305014149

2 months ago

0.0.0-next-20240305014714

2 months ago

0.0.0-next-20240301034824

2 months ago

0.0.0-next-20240301023125

2 months ago

0.0.0-next-20240301081856

2 months ago

0.0.0-next-20240228065321

2 months ago

0.0.0-next-20240228024935

2 months ago

0.0.0-next-20240228073832

2 months ago

0.0.0-next-20240228024304

2 months ago

0.0.0-next-20240226093820

2 months ago

0.0.0-next-20240227080544

2 months ago

0.0.0-next-20240227070821

2 months ago

0.0.0-next-20240227135200

2 months ago

0.0.0-next-20240227133524

2 months ago

0.0.0-next-20240227082542

2 months ago

0.0.0-next-20240223065734

3 months ago

0.0.0-next-20240225063559

2 months ago

0.0.0-next-20240225075926

2 months ago

0.0.0-next-20240223093319

3 months ago

0.0.0-next-20240223091803

3 months ago

0.0.0-next-20240225073543

2 months ago

0.0.0-next-20240225063605

2 months ago

8.1.10

3 months ago

0.0.0-next-20240205220829

3 months ago

8.1.9

3 months ago

0.0.0-next-20240205101340

3 months ago

0.0.0-next-20240205095446

3 months ago

0.0.0-next-20240205081245

3 months ago

8.1.8

3 months ago

0.0.0-next-20240202072805

3 months ago

0.0.0-next-20240202024430

3 months ago

0.0.0-next-20240202083257

3 months ago

0.0.0-next-20240201125156

3 months ago

0.0.0-next-20240201072006

3 months ago

0.0.0-next-20240201082931

3 months ago

0.0.0-next-20240131231251

3 months ago

0.0.0-next-20240131233549

3 months ago

0.0.0-next-20240201075206

3 months ago

0.0.0-next-20240129035206

3 months ago

0.0.0-next-20240126081640

3 months ago

0.0.0-next-20240123083034

4 months ago

0.0.0-next-20240122074526

4 months ago

0.0.0-next-20240122072901

4 months ago

0.0.0-next-20240122033350

4 months ago

0.0.0-next-20240122073529

4 months ago

0.0.0-next-20240122061426

4 months ago

8.1.7

4 months ago

0.0.0-next-20240119085716

4 months ago

0.0.0-next-20240119073703

4 months ago

0.0.0-next-20240119091713

4 months ago

0.0.0-next-20240117093010

4 months ago

0.0.0-next-20240117121934

4 months ago

0.0.0-next-20240117073054

4 months ago

0.0.0-next-20240117085204

4 months ago

0.0.0-next-20240112063447

4 months ago

0.0.0-next-20240112075232

4 months ago

0.0.0-next-20240115064607

4 months ago

0.0.0-next-20240112071325

4 months ago

0.0.0-next-20240115040830

4 months ago

0.0.0-next-20240112082805

4 months ago

0.0.0-next-20240115042410

4 months ago

8.1.6

4 months ago

0.0.0-next-20240115033857

4 months ago

0.0.0-next-20240114005722

4 months ago

0.0.0-next-20240111135630

4 months ago

8.1.5

4 months ago

0.0.0-next-20240108101321

4 months ago

0.0.0-next-20240108071116

4 months ago

8.1.4

4 months ago

0.0.0-next-20240105121713

4 months ago

0.0.0-next-20240105113752

4 months ago

0.0.0-next-20240105131424

4 months ago

0.0.0-next-20240105144747

4 months ago

0.0.0-next-20240104093320

4 months ago

0.0.0-next-20240104103738

4 months ago

0.0.0-next-20240104103039

4 months ago

0.0.0-next-20240102023857

4 months ago

8.1.2

4 months ago

0.0.0-next-20240104022642

4 months ago

0.0.0-next-20240103032717

4 months ago

0.0.0-next-20240103035759

4 months ago

0.0.0-next-20240102063242

4 months ago

8.1.3

4 months ago

0.0.0-next-20231229025030

4 months ago

0.0.0-next-20231229091919

4 months ago

0.0.0-next-20231230034830

4 months ago

0.0.0-next-20231229074949

4 months ago

8.1.1

4 months ago

0.0.0-next-20231228055514

4 months ago

0.0.0-next-20231225041300

5 months ago

0.0.0-next-20231225095220

5 months ago

0.0.0-next-20231225094207

5 months ago

0.0.0-next-20231225064454

5 months ago

0.0.0-next-20231225073141

5 months ago

0.0.0-next-20231222085153

5 months ago

0.0.0-next-20231222101023

5 months ago

0.0.0-next-20231222073352

5 months ago

0.0.0-next-20231222080837

5 months ago

0.0.0-next-20231221094341

5 months ago

0.0.0-next-20231221095908

5 months ago

8.1.0

5 months ago

0.0.0-next-20231220085130

5 months ago

0.0.0-next-20231221061836

5 months ago

0.0.0-next-20231220081137

5 months ago

0.0.0-next-20231220071546

5 months ago

0.0.0-next-20231220075455

5 months ago

0.0.0-feat-node-support-1703050615268

5 months ago

0.0.0-next-20231220035327

5 months ago

0.0.0-next-20231220075820

5 months ago

0.0.0-next-20231220074159

5 months ago

0.0.0-next-20231220071012

5 months ago

0.0.0-next-20231219093413

5 months ago

0.0.0-next-20231219093556

5 months ago

0.0.0-feat-node-support-1702930274547

5 months ago

0.0.0-next-20231219100157

5 months ago

0.0.0-feat-node-support-1702694175665

5 months ago

0.0.0-feat-node-support-1702696727086

5 months ago

11 months ago

11 months ago

11 months ago

11 months ago

6 months ago

6 months ago

7 months ago

6 months ago

6 months ago

6 months ago

6 months ago

10 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

10 months ago

7 months ago

7 months ago

7 months ago

10 months ago

7 months ago

11 months ago

8 months ago

11 months ago

11 months ago

12 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago