NextJs host and ViteJs remote | Need Help

[biksumesh]

This is my next js configuration

config.plugins.push(
      new NextFederationPlugin({
        name: 'Dummy',
        remotes: {
          remote_app: "remote_app@http://localhost:5001/remoteEntry.js"
        },
        filename: 'static/chunks/remoteEntry.js',
        shared: {},
      }),
    );

this is my vite config

plugins: [
        react(),
        federation({
          name: "remote_app",
          filename: "remoteEntry.js",
          exposes: {
            "./Button": "./src/components/Button",
          },
          shared: ["react", "react-dom"],
        }),
      ],
      build: {
        target: 'esnext',
        cssCodeSplit: false
      },
      server: {
        cors: true,
        headers: {
          'Access-Control-Allow-Origin': '*'
        }
      }

but i am getting the error Cannot use import statement outside a module

[Favy-source]

1. Module format mismatch between Vite (ESM) and Next.js (CJS/Hybrid) is the root cause and here's why

• Vite defaults to ES Modules, while Next.js often expects CommonJS (especially on the server). When the host (Next.js) tries to import() something built for a different format, it fails.
• You need to avoid duplicating React instances [this will save you hook/state issues and tell Vite not to bundle React into the remote entry.{ external + singleton sharing}
• You must avoid SSR on federated components unless you have SSR-aware configuration [Dynamic Import]
• Switch to @module-federation/vite
  if you’re using @module-federation/nextjs-mf on the host, it’s better to pair it with @module-federation/vite on the remote as this ensures you're using compatible federation runtimes, avoiding subtle mismatches in how metadata is registered, exposed, and loaded.

Possible Solution
Set lib.formats: ['es'] and rollupOptions.output.format: 'es' in vite
Ensure your remoteEntry.js is served with application/javascript
Use dynamic(..., { ssr: false }) in Next.js
Share react and react-dom in both apps
Check the browser dev tools for CORS or MIME type errors

// for your vite.config.js (Remote App), try this
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from '@originjs/vite-plugin-federation' // this might work, but risky for Next.js integration. you can try @module-federation/vite as option 2

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "remote_app",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/components/Button",
      },
      shared: {
        react: {
          singleton: true,
          requiredVersion: false,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: false,
        }
      },
    }),
  ],
  build: {
    target: 'esnext',
    cssCodeSplit: false,
    // key insight - force ESM format
    lib: {
      entry: './src/main.tsx',
      formats: ['es'], // ES module format only
      name: 'RemoteApp'
    },
    rollupOptions: {
      output: {
        format: 'es', // Explicit ESM output
        entryFileNames: 'remoteEntry.js',
      },
      external: ['react', 'react-dom'], // Don't bundle shared deps
    }
  },
  server: {
    cors: true,
    port: 5001,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Content-Type': 'application/javascript' //  MIME type fix
    }
  }
})

// next.config.js (Host App)
const NextFederationPlugin = require('@module-federation/nextjs-mf');
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) { // Client-side only
      config.plugins.push(
        new NextFederationPlugin({
          name: 'Dummy',
          remotes: {
            remote_app: "remote_app@http://localhost:5001/remoteEntry.js"
          },
          filename: 'static/chunks/remoteEntry.js',
          shared: {
            react: {
              singleton: true,
              requiredVersion: false,
            },
            "react-dom": {
              singleton: true,
              requiredVersion: false,
            }
          },
        })
      );
    }
    return config;
  },
};

// Component consumption in Next.js  for SSR fix

import dynamic from 'next/dynamic';
const RemoteButton = dynamic(
  () => import('remote_app/Button'), 
  { 
    ssr: false, // Disable SSR for federated modules
    loading: () => <div>Loading remote component...</div>
  }
);

export default function MyPage() {
  return (
    <div>
      <h1>Host App</h1>
      <RemoteButton />
    </div>
  );
}

// Debugging checklist:
// 1. Visit http://localhost:5001/remoteEntry.js directly - should show JS code
// 2. Check browser network tab for CORS/MIME type errors
// 3. Ensure both apps use same React versions
// 4. Start remote app (port 5001) before host app
// 5. Check browser console for federation-specific errors

please note that cross-bundler federation is experimental and you might need tweaks like MIME headers and manual external config