Code Monkey home page Code Monkey logo

mf-appdir-poc's Introduction

Module federation app dir POC

A simple POC - you need to update the node-modules files to get this working. This is a proof of concept for this PR: https://github.com/module-federation/universe/pull/2002/files

Steps to run this:

$ cd labeler && npm install
$ npm run dev

The above should run the dev server for labeler project on port 3000

Next, let's run the root-app project.

$ cd root-app && npm install

Now update this file: root-app/node_modules/@module-federation/enhanced/dist/src/lib/container/runtime/FederationRuntimePlugin.js line number 107 to this:

  if (!entryItem.import.includes(entryFilePath) && entryItem.layer !== 'rsc') {

Next update file root-app/node_modules/@module-federation/nextjs-mf/dist/src/plugins/NextFederationPlugin/next-fragments.js line number 53 to this:

if ((0, helpers_1.hasLoader)(oneOfRule, 'react-refresh-utils') && oneOfRule.exclude) {

Finally, update the function getNormalFederationPluginOptions in root-app/node_modules/@module-federation/nextjs-mf/dist/src/plugins/NextFederationPlugin/index.js to this:

getNormalFederationPluginOptions(compiler, isServer) {
        const hasAppDir = Object.keys(compiler.options.resolve.alias || {}).includes(
            'private-next-app-dir',
        );
        const defaultShared = (0, next_fragments_1.retrieveDefaultShared)(isServer);

        if (hasAppDir) {
            // These shared deps cause issues with the appDir. Any ideas around this?
            delete defaultShared['react'];
            delete defaultShared['react/'];
            delete defaultShared['react-dom'];
            delete defaultShared['react-dom/'];
        }
        const noop = this.getNoopPath();
        return {
            ...this._options,
            runtime: false,
            remoteType: 'script',
            // @ts-ignore
            runtimePlugins: [
                //@ts-ignore
                ...(this._options.runtimePlugins || []),
                require.resolve(path_1.default.join(__dirname, '../container/runtimePlugin')),
            ],
            exposes: {
                './noop': noop,
                './react': require.resolve('react'),
                './react-dom': require.resolve('react-dom'),
                './next/router': require.resolve('next/router'),
                ...this._options.exposes,
                ...(this._extraOptions.exposePages
                    ? (0, nextPageMapLoader_1.exposeNextjsPages)(compiler.options.context)
                    : {}),
            },
            remotes: {
                ...this._options.remotes,
            },
            shared: {
                ...defaultShared,
                ...this._options.shared,
            },
        };
    }

Now run $ npm run dev this shall load the root-app server on port 3001. Remote components from labeler should be loaded here.

mf-appdir-poc's People

Contributors

prasannamestha avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.