Cannot generate remoteEntry.js file with a global var name and chunks

[livne-via]

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?

[Yan2603]

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

[ruleeeer]

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.

[ruleeeer]

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

[livne-via]

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 ..

[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 ..

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.

[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.

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

[huajian123]

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

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

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

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

[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?

[crutch12]

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

[YukkiMattaru]

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

up this, have the same issue

[AlexeyAbretov]

up this, have the same issue

[zoltanseer]

any news?

[Issues-translate-bot]

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

---

any news?