Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

How to import components from main app dynamically with module federation#4029

Answeredbyyf-yang
yf-yang asked this question inQ&A
Discussion options

I am seeking an approach to implement a React component plugin system. The general idea is, fetching a list of component ids from remote, after the user chooses the component, import the component by accessing the cdn with the chosen id, then mount the component.

Is it achievable with module federation? If so, which example would be a good starter to learn from?

You must be logged in to vote

OK it works.

init({name:'app1',remotes:[],});// ...functionApp(){// ...constsetApp2=()=>{init({name:'app1',remotes:[{name:'app2',entry:'http://localhost:3002/remoteEntry.js',},],});setSystem({scope:'app2',module:'Widget',});};constsetApp3=()=>{init({name:'app1',remotes:[{name:'app3',entry:'http://localhost:3003/remoteEntry.js',},],});setSystem({scope:'app3',module:'Widget',});};// ...}

Replies: 1 comment 2 replies

Comment options

https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host seems to be the case. However, couldinit be called again to refresh the list of remotes? If so, then there is no problem.

You must be logged in to vote
2 replies
@yf-yang
Comment options

Seems init could be called multiple times. I'll come back later to show if it works.

@yf-yang
Comment options

OK it works.

init({name:'app1',remotes:[],});// ...functionApp(){// ...constsetApp2=()=>{init({name:'app1',remotes:[{name:'app2',entry:'http://localhost:3002/remoteEntry.js',},],});setSystem({scope:'app2',module:'Widget',});};constsetApp3=()=>{init({name:'app1',remotes:[{name:'app3',entry:'http://localhost:3003/remoteEntry.js',},],});setSystem({scope:'app3',module:'Widget',});};// ...}
Answer selected byyf-yang
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Category
Q&A
Labels
None yet
1 participant
@yf-yang

[8]ページ先頭

©2009-2025 Movatter.jp