-
Notifications
You must be signed in to change notification settings - Fork 221
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Support for Dynamic Remotes #157
Comments
Not supported yet, but contributions are welcome! |
Hello, thank you for you work. Is there an example how the dynamic remotes are working? Is it similar to webpacks approach?
|
I have released version 1.1.5, you can check the readme and demo for usage |
Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right? |
You can try to dynamically fetch a component or register a remote by adding the following code to the compiled code,Please note that the values of the parameters // dynamic is your remote name
remotesMap['dynamic'] = {
url: "http://localhost:5003/assets/remoteEntry.js",
format: 'esm',
from: 'vite'
}
const comp = await __federation_method_getRemote('dynamic', '. /Button'); Or you can refer to the previous issue #121 (comment) |
Very nice, this is what i was looking for, ill give it a spin and come back with feedback, thx a lot. |
Thanks This test works for me:
|
It will be good if I can change remotesMap directly from code, if it will be attached to window object for example. |
i think with this solution you can change it in the code, but before resolveing your remote component, you would have to update the remoteMap, if i understand you correctly. |
I want to use it on dev and prod both and in main code, don't manually edit generated code by plugin. |
What I want exactly: In React code made dynamic import of remote app and remote component, both names of app and component set from variables dynamically depend of props. |
Maybe __federation_method_getRemote and remotesMap should be attached to window and could be accesses from anywhere. |
@ruleeeer i see that the
is exported, but when using it in the code its undefined, do we need to import someting else first? |
I have setup an example for loading components completely dynamic, reading which components to load from a .json file. The only issue there is: There seems to be some kind of race condition for loading multiple components when it comes to Hooks. If I only add one component to load in the json file, then everything works fine. If I have multiple, like in the example, the components that use React functionality like Hooks fail loading with an error message telling that Hooks functionality does not exist (see vapp1 in the example). Repo with example: https://github.com/iconag-bbasmer/vite-module-federation-test |
@T0miii maybe need to add the fields import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import federation from '@originjs/vite-plugin-federation'
// https://vitejs.dev/config/
export default defineConfig({
server: {
// host: "192.168.56.1",
// port: 5100
},
cacheDir: 'node_modules/.cacheDir',
plugins: [
vue(),
federation({
name: 'layout',
filename: 'remoteEntry.js',
+ remotes: {} ,
- remotes: {
- home: {
- external: `Promise.resolve('http://localhost:5001/assets/remoteEntry.js')`,
- externalType: "promise"
- },
- 'common-lib': {
- external:`new Promise(resolve=>resolve('http://localhost:5002/assets/remoteEntry.js'))`,
- externalType:"promise"
- },
- 'css-modules': 'http://localhost:5003/assets/remoteEntry.js'
- },
shared: {
vue:{
// This is an invalid configuration, because the generate attribute is not supported on the host side
},
pinia:{
}
}
})
],
build: {
target: 'esnext',
minify: false,
cssCodeSplit: true,
rollupOptions: {
output: {
minifyInternalExports: false
}
}
}
}) |
Is your feature request related to a problem? Please describe.
For now we have to define the remotes in host at buildtime
Is there a way that remotes can be defined dynamically at run time instead?
Describe the solution you'd like
Would like a solution for dynamic import remote component from an remote url at runtime, no need define the remote in the vite plugin conifg.
like in wepack, can ref here: webpack/webpack#11033
will this feature be in the roadmap?
Describe alternatives you've considered
Additional context
basicly same as issue #121
The text was updated successfully, but these errors were encountered: