@module-federation/nextjs-mf module federation not working with npm run start and return a bad remoteEntry.js

119 Views Asked by At

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

0

There are 0 best solutions below