Open misaku opened 1 year ago
a try to made same of this but not work to me: https://github.com/originjs/vite-plugin-federation/issues/173
i create repository with simple example: https://github.com/misaku/fix-vite-federation
i read and try to made same of this too: https://github.com/originjs/vite-plugin-federation/discussions/221 but, i had some problens!
i didant try dev, i try with build and preview.
and i have one question too, if i dont use useState work normaly, but if i change file of remote, i needt build host and execute preview again is it normaly? is possible solve this problem?
one strange thing is, if i put component Link of react router dom federation work normally. =S
Any updates on this? I'm facing the same problem, components, if remote components exported are not using React... which is un-useful.
Guys, I found the source of the problem. The project shared from philals in here is working because is using those exact dependencies:
- "vite": "^2.9.5",
- "@originjs/vite-plugin-federation": "1.1.4",
- "@vitejs/plugin-react": "^1.3.0"
If we use the last version of @originjs/vite-plugin-federation
, we lose the property: singleton
for each library added to the shared
option for the plugin.
In my experience the content from remoteEntry.js
generated with singleton resolve the following React import:
import { r as react } from './index.bf7b401e.js';
And then both the container and the remote load React and then we get the problem.
But adding the singleton to both react
, and react-dom
in the plugin configuration like that:
shared: { react: { singleton: true }, "react-dom": { singleton: true } },
I get the following generated React import in remoteEntry.js
:
const {r:react} = await importShared('react')
Then if I use the remote as a standalone, react is resolved by itself. And if the component is used in another container as an MFE component, it uses the React version from the container and we don't get any errors.
So not sure why singleton is not longer supported, but it's needed for React projects and shared libraries, otherwise it doesn't work at all.
@robertovg Any other workaround for this. Getting same error .
I think the changed singleton
with packagePath
in the shared according with this commit. So my idea is to check if I can get same behaviour than with singleton adding the packagePath
for react
& react-dom
.
If it works we can get use last version of vite.
I'm not able to get await importShared
for react & react-dom with latest version vite-plugin-federation
so far, I tried with multiple configurations but always included react in the MFEs remote. Some help with this would be really welcome.
@ruleeeer @flyfishzy any idea on how to produce await importShared('react')
with version 1.1.9 and vite 3?
Hi, is there any news about this issue? Any hints would be appreciated.
I'm not able to get
await importShared
for react & react-dom with latest versionvite-plugin-federation
so far, I tried with multiple configurations but always included react in the MFEs remote. Some help with this would be really welcome.@ruleeeer @flyfishzy any idea on how to produce
await importShared('react')
with version 1.1.9 and vite 3?
Do you mean that react is always not properly shared?
Exactly, so it’s… unuseful for React projects, as you can’t have 2 react instances loaded in the same page.
On Wed, 12 Oct 2022 at 14:00, ruleeeer @.***> wrote:
I'm not able to get await importShared for react & react-dom with latest version vite-plugin-federation so far, I tried with multiple configurations but always included react in the MFEs remote. Some help with this would be really welcome.
@ruleeeer https://github.com/ruleeeer @flyfishzy https://github.com/flyfishzy any idea on how to produce await importShared('react') with version 1.1.9 and vite 3?
Do you mean that react is always not properly shared?
— Reply to this email directly, view it on GitHub https://github.com/originjs/vite-plugin-federation/issues/242#issuecomment-1276044494, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAELKN2E5PFBFCYVWHXRYP3WC2R5HANCNFSM577L67FA . You are receiving this because you were mentioned.Message ID: @.***>
--
-- Roberto Vázquez González
Exactly, so it’s… unuseful for React projects, as you can’t have 2 react instances loaded in the same page.
Coule you give me a reproduction of the repository, I'll check what the specific problem is, theoretically it should not be caused by singleton, but because react uses the cjs format, resulting in vite-plugin-federation does not work properly is also very common, I really can not do anything about rollup, esbuild, webpack three must produce a consistent bundle
Sure @ruleeeer, here you have:
https://stackblitz.com/edit/vite-plugin-federation-shared-libs-problems-hierarchy
If you want the app to crash, you only need to use the App from MF in the host by uncommenting this line.
Sharing as well a small 5m explanation of the project to make it easier to digest, but basically is an evolution of the project from philals upgrading vite
& vite-plugin-federation
versions and playing with workspaces to get everything running easily in stackblitz.
Sure @ruleeeer, here you have:
https://stackblitz.com/edit/vite-plugin-federation-shared-libs-problems-hierarchy
If you want the app to crash, you only need to use the App from MF in the host by uncommenting this line.
Sharing as well a small 5m explanation of the project to make it easier to digest, but basically is an evolution of the project from philals upgrading
vite
&vite-plugin-federation
versions and playing with workspaces to get everything running easily in stackblitz.
Thank you very much, I will check the following to see exactly what the problem is
@robertovg I released a new version to try to fix this issue and it looks like your app is working properly, buld&preview mode at least no crashes and no two reacts,dev mode some problems are very troublesome, if there is time I will see what the specific problems
Thanks @ruleeeer! Just forked my own example and upgraded the libraries here. It looks, as you mentioned, is working printing a Unchecked runtime.lastError: The message port closed before a response was received.
error in the console.
Now if I access to the (https://*:5002) (the remote) using it as it's exported directly, it includes:
__federation_shared_react.js
and __federation_shared_react-dom.js
.
And when accessing to the host directly (https://*:5001), it doesn't and is only present in the host assets folder:
Have to try with some real projects, but it looks like we would be able to use it to recreate MFEs architecture with Vite 👌.
Will update you with my results. Again thank you for the upgrade!
Thanks @ruleeeer and @robertovg . Your solution and examples worked for me.
But it doesn't work with the latest versions of vite-plugin-federation
. Do you know have any solution for this issue with the latest versions ?
Same thing here, time to go back to webpack
Same here, dependencies are not being shared, singleton is not an option. This is really quite sad, I was very excited about Vite and module federation, but without dependency sharing the viability of this solution is much lower.
@ruleeeer whats the plan about this project? Currently our company wants to adopt micro frontend architecture and was thinking this library could help, but is stuck because dependencies are not being shared properly. thanks a lot
Any development about this? If we can't make a library singleton this plugin doesn't meet our needs.
Same here
Same problem here. I'm trying to migrate from webpack to vite, and this seemed like the best solution for module federation. Unfortunately React is not being shared as a singleton, regardless of the configuration. This makes the library unusable
Same, for us we're able to share 2 react apps because it shared 1 react version but from the moment there are more it crashes. Sharing goes as following:
So in this case you'll have more than 1 instances of packages if multiple apps use the same packages as a shared one. We really need to have this singleton back or have the plugin know this with the use of the 'shared' property.
Makes this plugin unusable since sharing packages is the main intent of the plugin.
@ruleeeer Same issue for me. Why did you remove singleton
?
the last 1.1.14 was working quite well with shared react but as soon as I move to 1.3.14 the code break and it's sad that I had to upgrade if I want to have that checksum in the built shared. but once upgraded, the app failed critically
Any news here? Why singleton
option was removed?
singleton is needed. Any updates?
Versions
Reproduction
Additional Details
HOST ```TS // /
Steps to reproduce
What is Expected?
show same page of remote with images and with state works
What is actually happening?
if i use state host broken, and sayd cant use useState of undefind if im not use state, i can import remote component but, images of component lost