Failed to fetch dynamically imported module: http://localhost:5001/assets/remoteEntry.js

[ycy1621260121]

vite + [email protected] Failed to fetch dynamically imported module: http://localhost:5001/assets/remoteEntry.js

[Jiannan-dev]

Is http://localhost:5001/assets/remoteEntry.js an accessible address? it should point to a JavaScript file

[Darkdreams]

I also have this problem, I can access this link. You can see the code. Error: Uncaught (in promise) TypeError: Failed to fetch dynamically imported module:http://localhost:3000/assets/remoteEntry.js

package.json

"dependencies": {
    "@originjs/vite-plugin-federation": "^1.2.3",
    "vite-plugin-top-level-await": "^1.3.1",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.0"
  }

Remote

export default defineConfig({
  server:{
    port: 8080
  },
  cacheDir: 'node_modules/.cacheDir',
  plugins: [
    vue(),
    federation({
      name: 'remote',
      filename: 'remoteEntry.js',
      exposes: {
        './Test': './src/components/TestVue.vue'
      },
      shared: ["vue"],
      cors: true
    }),
    topLevelAwait({
      promiseExportName: "__tla",
      promiseImportName: i => `__tla_${i}`
    })
  ],
  build: {
    assetsInlineLimit: 40960,
    minify: true,
    cssCodeSplit: false,
    sourcemap:true,
    rollupOptions: {
      output: {
        minifyInternalExports: false
      }
    }
  }
})

Host

export default defineConfig({
    server: {
      port: 4000
    },
    cacheDir: 'node_modules/.cacheDir',
    plugins: [
        vue(),
        federation({
            name: 'host',
            filename: 'remoteEntry.js',
            remotes: {
                remote: 'http://localhost:3000/assets/remoteEntry.js'
            },
            shared: ["vue"]
        }),
        topLevelAwait({
          promiseExportName: "__tla",
          promiseImportName: i => `__tla_${i}`
        })
    ],
    build: {
      target: 'esnext',
      minify: false,
      cssCodeSplit: true,
      rollupOptions: {
        output: {
          format: 'esm',
          entryFileNames: 'assets/[name].js',
          minifyInternalExports: false,
        },
      },
    }
})

Host - main.js

import { createApp, defineAsyncComponent } from 'vue'
import './style.css'
import App from './App.vue'
const RemoteTest = defineAsyncComponent(() => import("remote/Test"));
const app = createApp(App);
app.component("RemoteTest", RemoteTest)
app.mount('#app')

Host - App.vue

<template>
  <RemoteTest />
</template>

[moygospadin]

Is http://localhost:5001/assets/remoteEntry.js an accessible address? it should point to a JavaScript file

Do u solve it?

[YKalashnikov]

any updates on it ?

[alexyork]

@ycy1621260121 @Darkdreams @moygospadin @YKalashnikov I also get this issue. I can access http://localhost:5001/assets/remoteEntry.js when I go to that URL and I see the JS code, but the host app fails to load it for some reason. Did any of you figure out what is going on?