System is not defined

[lovelyJason]

Versions

• vite-plugin-federation: 1.3.5
• vite: 4.4.6

my remote app vite.config.js

import federation from "@originjs/vite-plugin-federation";
import topLevelAwait from "vite-plugin-top-level-await";

export default async ({ command, mode }) => {
  const config = {
    build: {
      minify: "terser", // 是否进行压缩,boolean | 'terser' | 'esbuild',默认使用terser
      manifest: false, // 是否产出manifest.json
      sourcemap: false, // 是否产出sourcemap.json
      outDir: "dist/child/power", // 产出目录
      rollupOptions: {
        output: {
          format: "esm",
        },
      },
    },
    plugins: [
      federation({
        name: "remote-gm-system-web",
        filename: "remoteEntry.js",
        exposes: {
          "./mediaLibDrawer": "./src/components/mediaLibDrawer/index.vue",
        },
        shared: {
          vue: {
            generate: false,
          },
        },
      }),
      topLevelAwait({
        // The export name of top-level await promise for each chunk module
        promiseExportName: "__tla",
        // The function to generate import names of top-level await promise in each chunk module
        promiseImportName: (i) => `__tla_${i}`,
      }),
    ],
  };
  return config;
};

then run vite build, vite preview

The generated remoteEntry.js is as follows

export function __vite_legacy_guard(){import.meta.url,import("_").catch((()=>1))}System.register(["./preload-helper-legacy-f8638e03.js"],(function(e,t){"use strict";var r;return{setters:[e=>{r=e._}],execute:function(){const s=new Set(["Module","__esModule","default","_export_sfc"]);let o={"./mediaLibDrawer":()=>(i([],!1,"./mediaLibDrawer"),async function(e){return r((()=>t.import(e)),void 0)}("./__federation_expose_MediaLibDrawer-legacy-8170543b.js").then((e=>Object.keys(e).every((e=>s.has(e)))?()=>e.default:()=>e)))};const n={},i=e("dynamicLoadingCss",((e,r,s)=>{const o=t.meta.url;if(void 0===o)return void console.warn('The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".');const i=o.substring(0,o.lastIndexOf("remoteEntry.js"));e.forEach((e=>{const t=i+e;if(!(t in n))if(n[t]=!0,r){const e="css__remote-gm-system-web__"+s;null==window[e]&&(window[e]=[]),window[e].push(t)}else{const e=document.head.appendChild(document.createElement("link"));e.href=t,e.rel="stylesheet"}}))}));e("get",(e=>{if(!o[e])throw new Error("Can not find remote module "+e);return o[e]()})),e("init",(e=>{globalThis.__federation_shared__=globalThis.__federation_shared__||{},Object.entries(e).forEach((([e,t])=>{const r=Object.keys(t)[0],s=Object.values(t)[0],o=s.scope||"default";globalThis.__federation_shared__[o]=globalThis.__federation_shared__[o]||{};const n=globalThis.__federation_shared__[o];(n[e]=n[e]||{})[r]=s}))}))}}}));

Dude, where did you get the System js.Didn’t I already set Format as ESM? This code will report an error in the host application

：System is not defined.

then I try to set build.target as esnext, Still the same error

[anajnas66]

I have the same issue with document. Getting an error - document is not defined in the host app

[lovelyJason]

I've given up on it. It's bullshit. I might as well package it as lib。