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;

[SteffanEnnis]

So I have it working with NextJS as the remote and a Vite powered SPA as the host. However libraries such as react and react-dom are not being shared leading to failures.

[tejas-1206]

So I have it working with NextJS as the remote and a Vite powered SPA as the host. However libraries such as react and react-dom are not being shared leading to failures.

I'm building something similar. remote NextJS to host NextJS works absolutely fine since they both use NextFederationPlugin, but when I try to access my remote NextJS on my vite SPA via @originjs/vite-plugin-federation, getting CORS issue. Very weird.

What worked for you ? How were you able to establish connection between vite host and nextjs remote ?

[ScriptedAlchemy]

The next plugin uses federation v2. Originjs is incompatible with my v2 runtime. Use module-federation/vite

https://module-federation.io/

[tejas-1206]

The next plugin uses federation v2. Originjs is incompatible with my v2 runtime. Use module-federation/vite

https://module-federation.io/

This worked great. Thankyou !

I now have another issue which I'm unable to figure out why. So, I'm building and serving my nextJS remote app locally on localhost:3000 and consuming its remote entry file on my vite host app as wds: "wds@http://localhost:3000/_next/static/chunks/remoteEntry.js". This helps me make sure things are working before I deploy them.

One issue that I'm facing now is with consuming an env called API_BASE_URL on my remote, which points to the API base endpoint of the host. It is obtained from process.env.API_BASE_URL on the API layer of the codebase.

Everything works perfectly when I consume the remote entry file from my deployed remote nextJS app. But when I try to consume the locally built and served remote nextJS app, this env resolves to undefined and starts consuming the host's origin.

I'm not sure where do I start to look at, or if I lack the required knowledge about these terminologies. It would be really helpful if you could point me in the right direction or any suggestions would be absolutely helpful as well.

[ScriptedAlchemy]

Next support is ending. The plugin is already in maintenance mode. But since I know the answer , process env is compile time. Next string replaces it with the value in the code it processes. Since next never compiles the remote code, string replace doesn't happen. You could export the values from an exposed module so that you can get the strings on the other end or something.

Also a good idea to contact vercel or plan a offramp from next.js - my next plugin will disconnected from my ecosystem and tests in the second half of 2026. There's a pinned issue on core repo about it.

I will likely ship one more major version, that rewrites the integration into "migration mode" where its only purpose will be to move users to something else.