Problem to Shared Libs and Files

[misaku]

Versions

• vite-plugin-federation: v1.1.9
• vite: v3.0.9

Reproduction

Additional Details

HOST ```TS // / import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import federation from '@originjs/vite-plugin-federation'; // @ts-ignore import pkg from './package.json'; const { dependencies } = pkg; export default defineConfig({ plugins: [ react(), federation({ name: 'core', filename: 'remoteEntry.js', exposes: {}, remotes: { ChildModule: 'http://localhost:4173/assets/remoteEntry.js', }, shared: { ...dependencies, react: { singleton: true, version: dependencies['react'], }, 'react-dom': { singleton: true, version: dependencies['react-dom'], }, }, }), ], test: { globals: true, environment: 'happy-dom', }, build: { target: 'esnext', minify: false, cssCodeSplit: true, rollupOptions: { output: { format: 'esm', entryFileNames: 'assets/[name].js', minifyInternalExports: false, }, }, }, }); ``` REMOTE ```TS // / import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import federation from '@originjs/vite-plugin-federation'; // @ts-ignore import pkg from './package.json'; const { dependencies } = pkg; export default defineConfig({ plugins: [ react(), federation({ name: 'testeApp', exposes: { './App': './src/App.tsx' }, shared: { ...dependencies, react: { requiredVersion: dependencies['react'], }, 'react-dom': { requiredVersion: dependencies['react-dom'], }, }, }), ], test: { globals: true, environment: 'happy-dom', }, build: { target: 'esnext', minify: false, cssCodeSplit: false, rollupOptions: { output: { format: 'esm', entryFileNames: 'assets/[name].js', minifyInternalExports: false, }, }, }, }); ```

Steps to reproduce

• create vite host app
• create vite remote app
• expose default App component of vite
• shared react
• try to use app

  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

[misaku]

a try to made same of this but not work to me: https://github.com/originjs/vite-plugin-federation/issues/173

[misaku]

i create repository with simple example: https://github.com/misaku/fix-vite-federation

[misaku]

i read and try to made same of this too: https://github.com/originjs/vite-plugin-federation/discussions/221 but, i had some problens!

• its work if i put JSX of react-router-dom
• its not work only react component

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?

[misaku]

one strange thing is, if i put component Link of react router dom federation work normally. =S

[robertovg]

Any updates on this? I'm facing the same problem, components, if remote components exported are not using React... which is un-useful.

[robertovg]

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.

[Arpan1089]

@robertovg Any other workaround for this. Getting same error .

[robertovg]

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.

[robertovg]

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?

[urbanmarcen]

Hi, is there any news about this issue? Any hints would be appreciated.

[ruleeeer]

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?

Do you mean that react is always not properly shared?

[robertovg]

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

[ruleeeer]

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

[robertovg]

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.

[ruleeeer]

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

[ruleeeer]

@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

[robertovg]

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!

[midhunadarvin]

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 ?

[AsuraKev]

Same thing here, time to go back to webpack

[craigmiller160]

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.

[AsuraKev]

@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

[skypyxis]

Any development about this? If we can't make a library singleton this plugin doesn't meet our needs.

[daniel-gottfried]

Same here

[viqcinese-axur]

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

[thibaultvdb-hexagon]

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:

• app 1 shares react with app 2
• app 2 shares react with app 3 but different shared react file => new instance

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.

[cristiano-belloni]

@ruleeeer Same issue for me. Why did you remove singleton?

[coolcorexix]

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

[Ser6K]

Any news here? Why singleton option was removed?

[VladimirTambovtsev]

singleton is needed. Any updates?