I setup a next js with module federation here is configs :
package.json:
{
"name": "template-host-app",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"react": "^18",
"@module-federation/nextjs-mf": "^7.0.7",
"react-dom": "^18",
"next": "13.5.6"
},
"devDependencies": {
"typescript": "^5",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"eslint": "^8",
"eslint-config-next": "13.5.6"
}
}
next.config.js:
/** @type {import('next').NextConfig} */
const { NextFederationPlugin } = require('@module-federation/nextjs-mf');
const remotes = (isServer) => {
const location = isServer ? 'ssr' : 'chunks';
return {
// specify remotes
};
}
const nextConfig = {
reactStrictMode: true,
webpack(config, { isServer }) {
config.plugins.push(
new NextFederationPlugin({
name: 'host',
filename: 'static/chunks/remoteEntry.js',
exposes: {
"./Page": "./pages",
}
})
);
return config;
},
}
module.exports = nextConfig
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
}
so a simple project with default configs if i run this application using npm run dev
everthing will work as expected but when using npm run build
then npm run start
, the application start but i got a bad remoteEntry.js that show this error :
"Module "'+e+'" does not exist in container." and this error :
"Container initialization failed as it has already been initialized with a different share scope"
As result i cant use the link http://localhost:3000/_next/static/chunks/remoteEntry.js as remote in other apps because i will get remote app expose fake remote error which means a bad remoteEntry.js
Here is the repository to repreduce the error : https://github.com/AmineAyachi/template-host-app