4

I am currently working on implementing module federation in Next.js 13.4.4, utilizing the app-router feature and the @module-federation/nextjs-mf package. In order to achieve a micro front-end architecture, I have created a host app that imports remote modules and renders them on specific pages. However, when I add my webpack configuration, I encounter the following error:

./node_modules\next\dist\compiled\client-only\error.js
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.

Import trace for the requested module:
./node_modules\next\dist\compiled\client-only\error.js
./node_modules\styled-jsx\dist\index\index.js
./node_modules\styled-jsx\style.js
./node_modules@module-federation\nextjs-mf\src\include-defaults.js
./src\app\page.js

Any help would be appreciated.

Here is my configuration on next.config.js :

const { NextFederationPlugin } = require('@module-federation/nextjs-mf');

const remotes = (isServer) => {
  const location = isServer ? 'ssr' : 'chunks';
  return {
    remoteApp: `remoteApp@http://localhost:3001/_next/static/${location}/remoteEntry.js`
  };
}

const nextConfig = {
  reactStrictMode: true,
  experimental: {
    esmExternals: false,
  },
  webpack(config, { isServer }) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'host',
          filename: 'static/chunks/remoteEntry.js',
          remotes: remotes(isServer),
          exposes: {},
          shared: {},
          extraOptions:{
            automaticAsyncBoundary: true
          }
        })
      );
    

    return config;
  },
}

module.exports = nextConfig

Also, I import the remote into a page:

// src/pages/hostPage.js

"use client"
const Remote = dynamic(
    () => import('remoteApp/NewPage').then((mod) => mod.NewPage),
    {
        ssr: false,
    }
);
export function Home() {
    return (
        <main className="flex min-h-screen flex-col items-center justify-between p-24">
            <h1 className='text-white'>This is host</h1>
            <Remote />
        </main>
    )
}
export default Home;

Related dependencies:

  "dependencies": {
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "@module-federation/utilities": "1.7.3",
    "@module-federation/nextjs-mf": "6.4.0"
  },
  "devDependencies": {
    "webpack": "^5.76.2"
  }
Pouriversal
  • 66
  • 2
  • 6
  • You are trying to import a component or a part of code on the server that needs to run on the client side. Please read the documentation for the difference between [client and server side code](https://nextjs.org/docs/getting-started/react-essentials). – Fabio Nettis May 31 '23 at 12:49
  • 1
    @FabioNettis thanks for the comment, I tried using the "use client" directive. also, I moved the page out of the app directory into the pages. I'm not sure what I missed here – Pouriversal May 31 '23 at 14:14
  • The stack trace points to `/src/app/page.js`, have you tried to add the `"use client"` directive there? Since you seem to only have posted `/src/pages/hostPage.js`. From what I have seen module federation has an [example repository](https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13) for Next.js 13. Maybe you should check that out too. – Fabio Nettis May 31 '23 at 14:24
  • 1
    @FabioNettis Yes I did, I found out the implementation does not affect the Error, but as soon as I remove the `NextFederationPlugin` part located on `next.config.js`, the error will disappear – Pouriversal May 31 '23 at 14:39
  • Looks like the `NextFederationPlugin ` seems to be the root of your problem then, as stated above check out the [example repository](https://github.com/module-federation/module-federation-examples/tree/master/nextjs-v13). Maybe you'll find helpful information there. – Fabio Nettis May 31 '23 at 14:57

1 Answers1

0

I was having the exact same issue, and there's an open issue on github here : https://github.com/module-federation/universe/issues/953

I created a PR which addresses the problem, we'll see what Zack Jackson says... in the meantime you can follow the pattern used in the example repo which does not apply the federation plugin on server side builds.

nameofname
  • 91
  • 5