Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Module federation is working with npm run dev but not with npm run build then npm run start (Container initialization failed as it has already been initialized with a different share scope) #3474

Open
AmineAyachi opened this issue Dec 19, 2023 · 2 comments

Comments

@AmineAyachi
Copy link

AmineAyachi commented Dec 19, 2023

Hello i created a new next js application with this 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": {
    "@module-federation/nextjs-mf": "^7.0.8",
    "next": "13.5.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.0.4",
    "typescript": "^5.3.3"
  }
}

tsconfig.json :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

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
     remote: `remote@http://localhost:3001/_next/static/${location}/remoteEntry.js`,
   };
 }

 const nextConfig = {
   reactStrictMode: true,
   webpack(config, { isServer }) {

    config.resolve.fallback = {
      fs: false,
    };

    
     config.plugins.push(
       new NextFederationPlugin({
         name: 'host',
         filename: 'static/chunks/remoteEntry.js',
         remotes: remotes(isServer),
         exposes: {
           // Host app also can expose modules
         }
       })
     );

     return config;
   },
 }

module.exports = nextConfig

When i run npm run dev , everthing works but when i run npm run build then npm run start i got the application runing but it expose a bad remoteEntry.js file :
here is the file :
https://docs.google.com/document/d/1x5JYZRq-1-Hzx1FXzKLShEGk49NYEJ5Vz7IiWRzowBg/edit?usp=sharing
here is the url i am using for remoteEntry.js :
http://localhost:3000/_next/static/chunks/remoteEntry.js

@AmineAyachi AmineAyachi changed the title Module federation is working with npm run dev but not with npm run build then npm run start Module federation is working with npm run dev but not with npm run build then npm run start (Container initialization failed as it has already been initialized with a different share scope) Dec 19, 2023
@IkhyeonKim
Copy link

@AmineAyachi Hi! I encountered the same situation, have you figured this out?

@AmineAyachi
Copy link
Author

hi its a problem with the package i used the last version but i still have issues take a look on that :
module-federation/core#1773 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants