Vue Module Federation - Error: app3 not found while loading "./Component" from webpack/container/reference/app3

[nicky132]

micro frontend,3 apps, app1-vue2-host,app2-vue2-remote.but app2-vue2-host too, app3-vue3-vitejs-remote

app2 webpack config

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
new ModuleFederationPlugin({
        name: `config.name`,
        filename: `remoteEntry.js`,
        library: {
          type: 'window',
          name: `config.name`
        },
        exposes: {
          './main': './src/main/index.js',
        },
        remotes: {
          app3: 'app3@http://localhost:3000/assets/remoteEntry-app3.js?timestamp='+new Date().getTime(),
        },
        shared: {
          vue: {
            singleton: true,
            requiredVersion: '^3.2.0',
          },
        }
      })

app2 package.json

{
  "name": "application",
  "version": "1.0.0",
  "private": true,
  "scripts": {
  },
  "dependencies": {
    "@antv/g6": "~3.0.6",
    "@handsontable/vue": "^12.1.2",
    "@types/sharedb": "^2.2.2",
    "archiver": "^6.0.1",
    "bpmn-js": "^9.3.1",
    "codemirror": "^5.65.2",
    "core-js": "^3.6.5",
    "crypto-js": "^4.1.1",
    "dayjs": "^1.11.5",
    "diagram-js": "^8.7.1",
    "diff-match-patch": "^1.0.5",
    "dui-vue": "2.0.80",
    "echarts": "^5.2.2",
    "echarts-wordcloud": "^2.0.0",
    "element-resize-detector": "^1.2.4",
    "element-ui": "^2.13.2",
    "eslint-plugin-prettier": "4.0.0",
    "file-saver": "^2.0.5",
    "handsontable": "^12.1.2",
    "html-docx-js": "^0.3.1",
    "jquery": "^3.6.1",
    "js-base64": "^3.7.2",
    "js-cookie": "^3.0.1",
    "js-md5": "^0.7.3",
    "js-xlsx": "^0.8.22",
    "less": "^3.13.1",
    "mathjs": "^11.8.0",
    "nprogress": "^0.2.0",
    "patch-package": "^6.5.0",
    "portfinder": "^1.0.32",
    "postinstall-postinstall": "^2.1.0",
    "pptxgenjs": "^3.7.1",
    "qrcode": "^1.5.0",
    "reconnecting-websocket": "^4.4.0",
    "sharedb": "^3.0.0",
    "sortablejs": "^1.15.0",
    "spark-md5": "^3.0.2",
    "vcolorpicker": "^1.1.0",
    "vconsole": "^3.14.0",
    "vue": "^2.6.11",
    "vue-codemirror": "^4.0.6",
    "vue-color": "^2.8.1",
    "vue-grid-layout": "2.3.7",
    "vue-hoc": "^0.4.7",
    "vue-infinite-scroll": "^2.0.2",
    "vue-virtual-scroll-list": "^2.3.3",
    "vue3": "npm:vue@^3.2.0",
    "vuedraggable": "^2.24.3",
    "webpack-deadcode-plugin": "^0.1.17",
    "worker-loader": "^3.0.8",
    "xe-utils": "^3.5.7",
    "xml2js": "^0.6.2"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
    "@commitlint/config-conventional": "^16.0.0",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "^5.0.8",
    "@vue/cli-service": "^5.0.8",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/test-utils": "^1.0.3",
    "@vue/vue2-jest": "^27.0.0-alpha.3",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-import": "^1.13.5",
    "commitlint": "^16.0.1",
    "copy-webpack-plugin": "^11.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^6.5.1",
    "dotenv": "10.0.0",
    "ejs": "^3.1.8",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^5.5.0",
    "jest": "^27.1.0",
    "less-loader": "^5.0.0",
    "lint-staged": "^9.0.0",
    "mini-css-extract-plugin": "^2.6.1",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.8.2",
    "prettier": "2.4.1",
    "sass-loader": "^13.0.2",
    "script-loader": "^0.7.2",
    "slue-module": "^2.0.7",
    "stylus-loader": "^7.0.0",
    "svg-inline-loader": "^0.8.2",
    "ts-loader": "^9.3.1",
    "vue-loader": "^15.9.3",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^5.74.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1",
    "webpack-merge": "^5.8.0",
    "yorkie": "^2.0.0"
  },
  "peerDependencies": {
  },
  "resolutions": {
    "vue-loader": "^15.9.3",
    "commander": "10.0.0"
  },
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
  "license": "MIT",
  "lint-staged": {
    "./src/**/*.{js,vue}": [
      "npm run lint",
      "git add"
    ]
  }
}

app2 public/index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="referrer" content="no-referrer">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" id="faviconLink" href="static/img/favicon.ico">
    <script src="http://localhost:3000/assets/remoteEntry-app3.js"></script>
</head>

  <body>
    <div id="app"></div>
  </body>
</html>

app2 test bootstrap app3 component

bootstrap.js

const loadRemote = async () => {
  try {
    const remote = await import('app3/Component')
    console.log('Successfully loaded remote component:', remote)
  } catch (error) {
    console.error('Error loading remote component:', error)
  }
}

loadRemote()

app2 main.js

import('./bootstrap').catch((err) => console.error('Bootstrap error:', err))

app3 webpack config

import { defineConfig } from 'vite'
import federation from "@originjs/vite-plugin-federation"
export default defineConfig({
  plugins:[
    federation({
      name: 'app3',
      filename: 'remoteEntry-app3.js',
      exposes: {
        './App': './src/App.vue',
        './Component': './src/views/index.vue'
      },
      shared: {
        vue: {
          singleton: true, 
          requiredVersion: '^3.2.0',
          eager: true
        },  
      },
    })
  ],
  server: {
    port: 3000,
    open: true,
    proxy: {
    },
    cors: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    },
  }
})

app1 bootstrap app2 totally correctly, so pay attention to the problem,which is app2 bootstrap app3

error

Error loading remote component: Error: app3 not found
while loading "./Component" from webpack/container/reference/app3

expecting:app2 bootstrap app3 totally correctly too