Not working with NextJS app as host.

[bflopez]

Versions

• vite-plugin-federation: 1.2.3
• vite: 4.3.9

Reproduction

https://github.com/module-federation/module-federation-examples/tree/master/nextjs-react

Additional Details

Vite module federation seems to work for me everywhere except when NextJS is the host app. Above is a link to a nextjs repo that works with a webpack remote but if you add a vite app and use this plugin to expose a vite remote I just get `ScriptExternalLoadError: Loading script failed.` The module does exist and I can go to it in my browser. It works if Vite is host or another Webpack app is host but can't seem to get it to work with NextJS host.

This is the Vite Config

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import federation from "@originjs/vite-plugin-federation"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
      react(),
      federation({
        name: "remote",
        filename: "remoteEntry.js",
        remoteType: "var",
        exposes: {
          "./App": "./src/App",
        },
        shared: ["react", "react-dom"],
      })
  ],
    build: {
        modulePreload: false,
        target: 'esnext',
        minify: false,
        cssCodeSplit: false,
    }
})

This is the NextJS config

module.exports = {
  webpack(config, options) {
    if (!options.isServer) {
      config.plugins.push(
        new NextFederationPlugin({
          name: 'host',
          remotes: {
            remote: 'remote@http://localhost:3001/remote.js',
            vite: 'vite@http://localhost:4173/assets/remoteEntry.js',
          },
          filename: 'static/chunks/remoteEntry.js',
        }),
      );
    }

    return config;
  },
};

[nick4fake]

The issue is related to the fact that thia module generates esm files which are not supported by nextjs module federation

[Fredkr]

@bflopez Did you manage to get this working?

[adirzoari]

facing the same issue with react(no next.js) , did you find a soltuion? @bflopez @nick4fake link to my issue: https://github.com/originjs/vite-plugin-federation/issues/576

[akhudiakov97]

Also does not work on my side, even with the following remote Vite app

import "./App.css";

function App() {
  return (
    <div className="App">
      <h2>Remote</h2>
    </div>
  );
}

export default App;