Webpack Module Federation + Module Federation For Next.js + Single-spa

853 views Asked by At

I'm trying to use single-spa with Nextjs. The single-spa don't have support for Nextjs for now.

Therefore, based in Building React App with Module Federation and NextJS/React article thats is possible to use Webpack + Next.JS + ModuleFederationPlugin + NextFederationPlugin. My idea is to register an application on single-spa root-config thats consume a Nextjs application with NextFederationPlugin and ModuleFederationPlugin.

Then, we take this webpack.config.js in my react application...

const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-react");
const Webpack = require("webpack");

module.exports = (webpackConfigEnv, argv) => {
  const defaultConfig = singleSpaDefaults({
    orgName: "org",
    projectName: "host-react-module",
    webpackConfigEnv,
    argv,
    disableHtmlGeneration: false,
  });

  const config = merge(defaultConfig, {
    // modify the webpack config however you'd like to by adding to this object

    plugins: [
      new Webpack.container.ModuleFederationPlugin({
        name: "host_react_module",
        filename: "remoteEntry.js",
        remotes: {
          // The following is when running locally
          remote_nextjs_module: "remote_nextjs_module@https://remote-nextjs-module.vercel.app/_next/static/chunks/remoteEntry.js",
        },
        shared: {
          react: {
            // Notice shared are NOT eager here.
            requiredVersion: false,
            singleton: true,
            eager: false,
          },
        },
      }),
    ],
  });

  return config;
};

Then, running the application i get the error:

Uncaught Error: application '@org/host-react-module' died in status LOADING_SOURCE_CODE: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react

I'dont know how to solve this problem... it occur just with single-spa webpack.config like the code example above.

If the react module is not availabe, i tried to get this module as dynamic remote like the Webpack Module Federation Doc. with no success.

The problem will be solved using a index.js importing a bootstrap.js, but in a single-spa app we need to export 3 lifecycles functions.

Link to the code in bitbucket https://bitbucket.org/levymateusm/next-single-spa/src/next-module-federation/

0

There are 0 answers