module-federation / module-federation-examples

Implementation examples of module federation , by the creators of module federation
https://module-federation.io/
MIT License
5.67k stars 1.76k forks source link

Modern.js will report errors when using module federation and micro frontends(garfish).(TypeError: remoteEntryExports.get is not a function ) #4297

Closed dragonlyl closed 1 month ago

dragonlyl commented 1 month ago

Problem

Modern.js will report errors when using module federation and micro frontends(garfish).(TypeError: remoteEntryExports.get is not a function )

Example

https://github.com/module-federation/module-federation-examples/tree/master/modernjs/host

To recreate

In modern.config.ts

import { appTools, defineConfig } from "@modern-js/app-tools";
import { garfishPlugin } from '@modern-js/plugin-garfish';

export default defineConfig({
  runtime: {
    router: true,
  },
  deploy: {
    microFrontend: true, // microFrontend config
  },
  plugins: [
    appTools({
      bundler: "rspack",
    }),
    garfishPlugin(),  // microFrontend config
  ],
  tools: {
    rspack: (config, { rspack, appendPlugins }) => {
      //@ts-ignore
      config.output.publicPath = "auto";
      appendPlugins([new rspack.container.ModuleFederationPlugin({
        name: "host",
        remotes: {
          provider:
            "provider@https://lf3-motor.dcarstatic.com/obj/motor-fe-static/factory_mf/static/remoteEntry.js",
        },
        shared: {
          react: { singleton: true, eager: true },
          "react-dom": { singleton: true, eager: true },
        },
      })]);
      delete config.optimization?.splitChunks;
      delete config.optimization?.runtimeChunk;
    },
  },
});

In code

import { Input } from "@arco-design/web-react";
import { Filters } from "provider/AdminComponents";
import React from "react";
const FormItem = Filters.Item;
const Index = () => (
  <Filters.Form>
    <FormItem label="chat name" field="nickname">
      <Input placeholder="input..." />
    </FormItem>
    <FormItem label="chat name" field="nickname">
      <Input placeholder="input..." />
    </FormItem>
    <FormItem label="chat name" field="nickname">
      <Input placeholder="input..." />
    </FormItem>
    <FormItem label="chat name" field="nickname">
      <Input placeholder="input..." />
    </FormItem>
    <FormItem label="chat name" field="nickname">
      <Input placeholder="input..." />
    </FormItem>
  </Filters.Form>
);

export default Index;

Expected behaviour

The app should continue to work as expected

Actual behaviour

image
ScriptedAlchemy commented 1 month ago

Garfish is a predecessor to federation. You should use federation runtime or use the framework bridges instead.