vite-plugin-federation Cannot generate remoteEntry.js file with a global var name and chunks

Versions

vite-plugin-federation: 1.2.1
vite: 4.1.0

Reproduction

vite.config.ts

import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    lib: {
      name: "myContent",
      entry: "src/test.js",
      formats: ["iife"],
    },
  },
  plugins: [
    react(),
    federation({
      name: "my_app",
      filename: "remoteEntry.js",
      exposes: {
        page: "./src/test.js",
      },
    }),
  ],
});

src/test.js

const test = () => {
  return "sdfsdfdsf";
};

console.log("hello world");
export default test;

Additional Details

Steps to reproduce

npm run build

What is Expected?

to generate a remoteEntry.js with a global var name myContent, and all the chunks (in case i have).

is it possible to get the same bundle behaviour such as the webpack generates?

i.e: webpack ModuleFederationPlugin bundle example:

var my_remote_app;
(()=>{
    "use strict";
    var e, a, t, r, d, c, f, n, o, l, s, i, u, b, h, m, p, v, g = {
        446489: (e,a,t)=>{
            var r = {
                page: ()=>Promise.all([t.e(2370), t.e(6788), t.e(7157), t.e(2716), t.e(2633), t.e(7574), t.e(3222), t.e(2052), t.e(497), t.e(427), t.e(6202), t.e(4370), t.e(7630), t.e(4230), t.e(2897), t.e(4184), t.e(6881), t.e(1729), t.e(8436), t.e(2126), t.e(5344), t.e(1203), t.e(1015), t.e(6519), t.e(7517), t.e(7352), t.e(5071), t.e(7184), t.e(1696), t.e(6225), t.e(8115), t.e(3434), t.e(2850), t.e(6611), t.e(8494)]).then((()=>()=>t(368494)))
            }
              , d = (e,a)=>(t.R = a,
            a = t.o(r, e) ? r[e]() : Promise.resolve().then((()=>{
                throw new Error('Module "' + e + '" does not exist in container.')
            }
            )),
            t.R = void 0,
            a)

p.s: is it possible to use iife format and global var name with chunks?

What is actually happening?

Can i still generate a global variable bundle remoteEntry.js, and still have more than 1 chunk, or anybody else has a workaround for this?

Mar 09 '23 15:03 livne-via

I'am meet this issue too, is anyone for help?

Mar 13 '23 02:03 Yan2603

The temporary test case of vite-plugin-federation only supports esm and systemjs. It is not clear what will happen when using iife. I will try it when I have time.

Mar 22 '23 09:03 Jiannan-dev

Maybe I can't deal with this problem, because code-spliting is a must for this plugin.

Mar 23 '23 08:03 Jiannan-dev

Maybe I can't deal with this problem, because code-spliting is a must for this plugin.

@ruleeeer As a matter of fact, iv׳e also tried with a rollup iife plugin, just for a small starter app, and even then - i couldn't produce an cjs chunks with a proper desired var name.

I just wonder if someone here maybe succeeded to load Vite MF, with Webpack as a host, and in a dynamic way ..

Mar 25 '23 18:03 livne-via

As a matter of fact, iv׳e also tried with a rollup iife plugin, just for a small starter app, and even then - i couldn't produce an cjs chunks with a proper desired var name.

I just wonder if someone here maybe succeeded to load Vite MF, with Webpack as a host, and in a dynamic way ..

If I remember correctly, rollup has provided iife format support. As for federation, I have built a static webpack as an example of host, but dynamic related examples are currently missing.

Mar 27 '23 01:03 Jiannan-dev

As a matter of fact, iv׳e also tried with a rollup iife plugin, just for a small starter app, and even then - i couldn't produce an cjs chunks with a proper desired var name. I just wonder if someone here maybe succeeded to load Vite MF, with Webpack as a host, and in a dynamic way ..

If I remember correctly, rollup has provided iife format support. As for federation, I have built a static webpack as an example of host, but dynamic related examples are currently missing.

Are there plans to add this example? I am using vite vue3 as remote, angular12(webpack5) as host, dynamic loading has been unsuccessful this is the simple example: vue as remote:https://github.com/huajian123/dpt-vue angular as host:https://github.com/huajian123/ng-test-mf

May 31 '23 10:05 huajian123

也许我无法处理这个问题，因为代码拆分是这个插件必须的。

@ruleeeer事实上，iv׳e 还尝试了一个rollup iife插件，只是为了一个小型的入门应用程序，即使那样 - 我也无法生成具有适当所需 var 名称的 cjs 块。

我只是想知道这里是否有人可以成功加载 Vite MF，以 Webpack 作为主机，并以动态方式..

May I ask what are you doing to dynamically load now?

May 31 '23 10:05 huajian123

As a matter of fact, iv׳e also tried with a rollup iife plugin, just for a small starter app, and even then - i couldn't produce an cjs chunks with a proper desired var name. I just wonder if someone here maybe succeeded to load Vite MF, with Webpack as a host, and in a dynamic way ..

If I remember correctly, rollup has provided iife format support. As for federation, I have built a static webpack as an example of host, but dynamic related examples are currently missing.

If possible, can you give an example of dynamic loading with webpack as the host and vite as the remote?

Jun 05 '23 06:06 huajian123

Any progress on this? We would like to use it with webpack as host, but it's impossible for now.