Open ycy1621260121 opened 1 year ago
Is http://localhost:5001/assets/remoteEntry.js an accessible address? it should point to a JavaScript file
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>
Is http://localhost:5001/assets/remoteEntry.js an accessible address? it should point to a JavaScript file
Do u solve it?
any updates on it ?
@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?
How did you solve the problem
vite + vue@2.7.14 Failed to fetch dynamically imported module: http://localhost:5001/assets/remoteEntry.js