Comments (15)
Maybe __federation_method_getRemote and remotesMap should be attached to window and could be accesses from anywhere.
from vite-plugin-federation.
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 from
, format
etc. are adjusted according to the different configurations
// 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)
from vite-plugin-federation.
Very nice, this is what i was looking for, ill give it a spin and come back with feedback, thx a lot.
from vite-plugin-federation.
Not supported yet, but contributions are welcome!
from vite-plugin-federation.
Hello, thank you for you work.
Is there an example how the dynamic remotes are working? Is it similar to webpacks approach?
await __webpack_init_sharing__("default");
// TODO: load the script tag somehow. e. g. with a script loader
const container = window.application_a;
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const module = await container.get("./module");
from vite-plugin-federation.
Hello, thank you for you work.
Is there an example how the dynamic remotes are working? Is it similar to webpacks approach?
await __webpack_init_sharing__("default"); // TODO: load the script tag somehow. e. g. with a script loader const container = window.application_a; // Initialize the container, it may provide shared modules await container.init(__webpack_share_scopes__.default); const module = await container.get("./module");
I have released version 1.1.5, you can check the readme and demo for usage
from vite-plugin-federation.
Thank you, but if i understand correclty this needs to happen on build level. And can not add Remotes in run time right?
from vite-plugin-federation.
Thanks
This test works for me:
"@squad2": {
external: `Promise.resolve(window.localStorage.setItem("address2","http://localhost:3002/assets/remoteEntry.js") || window.localStorage.getItem('address2'))`,
externalType: "promise",
},
from vite-plugin-federation.
It will be good if I can change remotesMap directly from code, if it will be attached to window object for example.
from vite-plugin-federation.
Collaborator
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.
from vite-plugin-federation.
I want to use it on dev and prod both and in main code, don't manually edit generated code by plugin.
from vite-plugin-federation.
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.
from vite-plugin-federation.
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
from
,format
etc. are adjusted according to the different configurations// 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)
@ruleeeer i see that the
is exported, but when using it in the code its undefined, do we need to import someting else first?
@DileSoft did you had any success with this?
from vite-plugin-federation.
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
from vite-plugin-federation.
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
from
,format
etc. are adjusted according to the different configurations// 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)
@ruleeeer i see that the
is exported, but when using it in the code its undefined, do we need to import someting else first? @DileSoft did you had any success with this?
@T0miii maybe need to add the fields remotes
in plugin options, even if there is no static remote components.
like this, packages/examples/vue3-demo-esm
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
}
}
}
})
from vite-plugin-federation.
Related Issues (20)
- ERROR: Expression Expected - Unable to understand this error
- Mutliple WS connections established to the remote app
- Adding and then removing `manualChunks` causes runtime error
- flattenModule breaks dependencies HOT 1
- exporting variables from the shared module, the variables within the shared module appear as undefined HOT 1
- module federation react typescript webpack and vite throws an error "Loading script failed." HOT 2
- Vue2.7, Vite host with webpack remote, "shared" create undefiend paramter(with Reproduction project)
- 【example demo bug】Did not work as expected when using the sample demo HOT 3
- 【bug】vue3-demo-esm-shared-store running __federation_shared_myStore-ed6e87a0.js 404
- Module Federation + base url HOT 3
- Vite Module Federation CORS error HOT 3
- Do something like @module-federation/typescript? HOT 2
- Error: Minified React error #321; HOT 4
- Enable CORS by including credentials when fetching Remotes on other Domains
- Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL HOT 2
- Shared dependencies is loaded sequentially
- React module federation gives __federation_shared_react-dom-6fc2ee8d.js:224 TypeError: Cannot read properties of null (reading 'useContext') at react_production_min.useContext (__federation_shared_react-af90d75c.js:59:144) HOT 6
- [MaterialUI] Cannot read properties of null (reading 'useContext')
- Is this project abandonned HOT 7
- Error accessing remoteEntry.js files throughout vite examples HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vite-plugin-federation.