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/