Vite 8 (Rolldown): dynamicLoadingCss called with __v__css__ string instead of array, causing TypeError: e.forEach is not a function

[mehmeterslann]

Versions

• @originjs/vite-plugin-federation: 1.4.1
• vite: 8.0.1 (Rolldown bundler)
• @vitejs/plugin-react: 4.3.4
• tailwindcss: 4.2.2 with @tailwindcss/postcss
• react: 19.2.4

What is Expected?

Remote apps should load correctly. The dynamicLoadingCss() function should receive an array of real CSS file paths (e.g., ["./style-abc123.css"]).

What is Happening?

With Vite 8 (which uses the Rolldown bundler), the generated remoteEntry.js calls dynamicLoadingCss() with a virtual module string instead of an array:

// Generated by vite-plugin-federation@1.4.1 + Vite 8:
"./App": () => (
  a(`__v__css__/path/to/App.tsx`, false, `./App`),
  o("./__federation_expose_App-XYZ.js").then(...)
)

But the dynamicLoadingCss function (a) does:

var a = (e, t, n) => {
  // ...
  e.forEach(e => { /* create <link> tag */ })
}

e is the __v__css__ string. String.prototype.forEach does not exist → TypeError: e.forEach is not a function is thrown.

This causes the entire remote module to fail to load, and the host app shows "Failed to load [remote]" via its ErrorBoundary.

Root Cause

Vite 8 uses Rolldown as its bundler. Rolldown represents CSS associated with a module using virtual module IDs prefixed with __v__css__. The federation plugin picks up these virtual IDs and passes them as-is to dynamicLoadingCss(), which expects an array of real relative file paths.

Reproduction

1. Set up Module Federation with @originjs/vite-plugin-federation@1.4.1 + vite@8.0.1
2. Use Tailwind CSS v4 with @tailwindcss/postcss in remote apps
3. Build a remote app — inspect dist/assets/remoteEntry.js
4. Look for: a(\v__css/path/to/Component.tsx`, false, `./App`)`
5. Load the remote from the host — observe TypeError: e.forEach is not a function

Workaround

Post-build, patch remoteEntry.js to replace the virtual module ID with the actual CSS bundle file reference:

// Before:
a(`__v__css__/path/to/App.tsx`, false, `./App`)
// After:
a(["./style-abc123.css"], false, `./App`)

Or as a Vite plugin in vite.config.ts:

function fixFederationCss(): Plugin {
  return {
    name: "fix-federation-css",
    apply: "build",
    closeBundle() {
      const assetsDir = path.resolve(__dirname, "dist/assets");
      const remoteEntry = path.join(assetsDir, "remoteEntry.js");
      if (!fs.existsSync(remoteEntry)) return;
      const cssFile = fs.readdirSync(assetsDir).find(f => /^style-.*\.css$/.test(f));
      let code = fs.readFileSync(remoteEntry, "utf8");
      const replacement = cssFile ? `a(["./${cssFile}"],` : "a([],";
      code = code.replace(/a\(`__v__css__[^`]+`,/g, replacement);
      fs.writeFileSync(remoteEntry, code);
    },
  };
}

Additional Notes

The fix should be applied in the plugin itself: before generating dynamicLoadingCss() calls, filter out virtual module IDs (starting with __v__css__) and resolve them to the actual CSS asset file in the build output.

[YorenLee]

貌似这个插件只支持rollup vite8是rolldown了

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

---

It seems that this plug-in only supports rollup and vite8 is rolldown.

[alfredosalzillo]

I'm getting the same issue.

It seems that the regexp at https://github.com/originjs/vite-plugin-federation/blob/91014da9a39d9ea264e2ca7c5d22c620d5752073/packages/lib/src/prod/expose-production.ts#L214C11-L214C71 is not working.

This is probably because now all the strings are transpiled to template strings.

Patching the regexp to add support to match with the template string works.

new RegExp(`(["\`'])__v__css__.*?\\1`, 'g')

[alfredosalzillo]

It seems there is no intention on vite side to rollback the "always template string" behaviour vitejs/vite#20993

[budarin]

Ok, so we will continue to produce huge bundles, then heroically compress them, then decompress them on the client, loading the CPU and aggravating the atmosphere - it's so hard to do everything optimally - it breaks the mess we are used to

[alfredosalzillo]

Ok, so we will continue to produce huge bundles, then heroically compress them, then decompress them on the client, loading the CPU and aggravating the atmosphere - it's so hard to do everything optimally - it breaks the mess we are used to

No need to be aggressive. I just wanted to document that the change causing the issue was made and there will be probably not a rollback on this behavior, so projects using this plugin should think about fork or migrating to something else, since this plugin seems to be unmantained from 11 months.

[budarin]

Ok, so we will continue to produce huge bundles, then heroically compress them, then decompress them on the client, loading the CPU and aggravating the atmosphere - it's so hard to do everything optimally - it breaks the mess we are used to

No need to be aggressive. I just wanted to document that the change causing the issue was made and there will be probably not a rollback on this behavior, so projects using this plugin should think about fork or migrating to something else, since this plugin seems to be unmantained from 11 months.

I didn't express aggression - I was just upset by this turn of events.

[ix-benjaminm]

A workaround which works for me is adding this into the vite.config.ts:

/**
 * Workaround for https://github.com/originjs/vite-plugin-federation/issues/740.
 * Vite 8 (Rolldown) produces `__v__css__` virtual IDs instead of real CSS file arrays,
 * which causes `dynamicLoadingCss()` in remoteEntry.js to throw "e.forEach is not a function".
 * CSS is already injected into JS via vite-plugin-css-injected-by-js, so replacing
 * the virtual ID strings with empty arrays is safe.
 */
function fixFederationCssForVite8(): Plugin {
    return {
        name: "fix-federation-css-vite8",
        apply: "build",
        closeBundle() {
            const remoteEntry = path.resolve("dist", "remoteEntry.js");
            if (!fs.existsSync(remoteEntry)) return;
            let code = fs.readFileSync(remoteEntry, "utf8");
            code = code.replace(/`__v__css__[^`]*`/g, "[]");
            fs.writeFileSync(remoteEntry, code);
        },
    };
}

and call it later in the plugins-array like this:

plugins: [fixFederationCssForVite8()]