Using injectScript inside a NextJs Host #529

SombreroElGringo · 2023-01-27T05:38:28Z

SombreroElGringo
Jan 27, 2023

Hello,

I am trying to use injectScrip to dynamically load a micro-frontend not know at build time, but can't make it works.
For context, I am working inside a nx monorepo (v14.7.5). So I generated 2 nextjs apps, here are the only modification I did following the different example provided in @module-federation/nextjs-mf documentation and this example.

Could you help me to understand what I am missing or doing bad 🙏

Remote app next.config.js:

const { withNx } = require('@nrwl/next/plugins/with-nx');
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    svgr: false,
  },
  webpack(config, options) {
    const { isServer } = options;
    config.plugins.push(
      new NextFederationPlugin({
        name: 'remote',
        library: { type: 'var', name: 'remote' },
        extraOptions: {},
        remotes: {
          remote: `remote@http://localhost:4200/_next/static/${
            isServer ? 'ssr' : 'chunks'
          }/remote.js`,
        },
        filename: 'static/chunks/remote.js',
        exposes: {
          './index': './pages/index',
        },
        shared: {},
      })
    );

    return config;
  },
};

module.exports = withNx(nextConfig);

Host app ./page/index.tsx :

import { injectScript } from '@module-federation/nextjs-mf/utils';
import { useEffect, useState } from 'react';

export const Index = () => {
  const [microFrontend, setMicroFrontend] = useState();

  useEffect(() => {
    injectScript({
      global: 'remote',
      uniqueKey: 'remote',
      url: 'http://localhost:4200/_next/static/chunks/remote.js',
    })
      .then((container) => container.get('./index'))
      .then((data) => {
        setMicroFrontend(data);
      });
  }, []);

  return (
    <div className={styles.page}>
      <div className='wrapper'>
        <div className='container'>
          <div id='welcome'>
            <h1>
              <span> Hello there, </span>
              Welcome nextjs-host 👋
            </h1>
          </div>

          <div className='rounded'>{microFrontend}</div>
        </div>
      </div>
    </div>
  );
};

export default Index;

and copied the _document.js from the example in universe

import { FlushedChunks, flushChunks, revalidate } from '@module-federation/nextjs-mf/utils';
import Document, {
  DocumentContext,
  DocumentInitialProps,
  Head,
  Html,
  Main,
  NextScript,
} from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
    if (process.env.NODE_ENV === 'development' && !ctx.req?.url.includes('_next')) {
      await revalidate().then((shouldReload) => {
        if (shouldReload) {
          ctx.res.writeHead(302, { Location: ctx.req.url });
          ctx.res.end();
        }
      });
    } else {
      ctx?.res?.on('finish', () => {
        revalidate();
      });
    }

    const chunks = await flushChunks();

    const initialProps = await Document.getInitialProps(ctx);
    return {
      ...initialProps,
      chunks,
    };
  }

  render() {
    return (
      <Html>
        <Head>
          <meta name='robots' content='noindex' />
          <FlushedChunks chunks={this.props.chunks} />
        </Head>

        <body className='bg-background-grey'>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Answered by brunos3d

Jan 27, 2023

Hello, @SombreroElGringo. Hope you're doing well bro.

I just made an example reproducing what you're trying to achieve
https://github.com/brunos3d/nextjs-federate-page

Basically the problem is right after when you fetches the container and sets the state using the module loader function without calling it, a problem which I demonstrate here .

In your case to solve it just apply the following changes to your index page in your host app 😄

useEffect(() => {
    injectScript({
      global: 'remote',
      uniqueKey: 'remote',
      url: 'http://localhost:4200/_next/static/chunks/remote.js',
    })
      .then((container) => container.get('./index'))
      .then((data) => {
-        setMicroF…

View full answer

brunos3d · 2023-01-27T18:48:49Z

brunos3d
Jan 27, 2023
Maintainer

Hello, @SombreroElGringo. Hope you're doing well bro.

I just made an example reproducing what you're trying to achieve
https://github.com/brunos3d/nextjs-federate-page

Basically the problem is right after when you fetches the container and sets the state using the module loader function without calling it, a problem which I demonstrate here .

In your case to solve it just apply the following changes to your index page in your host app 😄

useEffect(() => {
    injectScript({
      global: 'remote',
      uniqueKey: 'remote',
      url: 'http://localhost:4200/_next/static/chunks/remote.js',
    })
      .then((container) => container.get('./index'))
      .then((data) => {
-        setMicroFrontend(data);
+       setMicroFrontend(data().default); 
      });
  }, []);

And complementing, if you're using named exports just change the default to the name of your used exportation name 🚀

4 replies

SombreroElGringo Jan 27, 2023
Author

@brunos3d Thank you very much for the help ❤️

khoand3012 Apr 10, 2023

@brunos3d can I use this but with SSR? For example putting it in getInitialProps and return the component instead?

brunos3d Apr 10, 2023
Maintainer

@khoand3012 as we now have the possibility of using dynamic remotes on node, I think would be a best approach if you try to reproduce using the following sample

module-federation/module-federation-examples#2921

khoand3012 Apr 11, 2023

Thanks a bunch, but in this example I can only see that the script is injected. How do I exactly take the module out and use it?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using injectScript inside a NextJs Host #529

{{title}}

Replies: 1 comment 4 replies

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Using injectScript inside a NextJs Host #529

SombreroElGringo Jan 27, 2023

Replies: 1 comment · 4 replies

brunos3d Jan 27, 2023 Maintainer

SombreroElGringo Jan 27, 2023 Author

khoand3012 Apr 10, 2023

brunos3d Apr 10, 2023 Maintainer

khoand3012 Apr 11, 2023

SombreroElGringo
Jan 27, 2023

Replies: 1 comment 4 replies

brunos3d
Jan 27, 2023
Maintainer

SombreroElGringo Jan 27, 2023
Author

brunos3d Apr 10, 2023
Maintainer