Shared works only for top level imports

[vovkiv94]

Versions

• vite-plugin-federation: 1.3.4
• vite: 4.5.2

Reproduction

https://github.com/originjs/vite-plugin-federation/tree/main/packages/examples/react-vite

Additional Details

The issues seems to be here: https://github.com/originjs/vite-plugin-federation/blob/main/packages/lib/src/prod/remote-production.ts#L261-L263

sharedInfo[0] is react but moduleName is not always react. Sometimes it is react/jsx-runtime
Same issue happens if remote has imports like import ReactDOM from 'react-dom/client';

Steps to reproduce

1. Start both host and remote.
2. Open host in browser

What is Expected?

Shared react module should be downloaded only once as http://localhost:5000/assets/__federation_shared_react-2436d585.js

What is actually happening?

First host downloads shared react module from http://localhost:5000/assets/__federation_shared_react-2436d585.js
Then remote downloads shared react module from http://localhost:5001/assets/__federation_shared_react-2436d585.js

[peterholcomb]

Also running into this on a react app. When a top-level component renders a child, i'm seeing errors around Cannot read properties of null (reading 'useRef') etc... which were fixed in the top-level component with the shared["react"...] vite.config.js

[judithhartmann]

@peterholcomb what do you mean with your comment? do you have a workaround? i am also running into this

[peterholcomb]

@judithhartmann I eventually just gave up on this plugin for our react app. I setup webpack on both our host and client apps using the webpack federation plugin and it worked great. I just couldn't get this one to work on our apps unfortunately.

[adirzoari]

@peterholcomb I just finished migrating all of my project apps from Webpack to Vite, but when I deployed, I encountered this error. It feels like a waste of time; I wish I had known about this issue beforehand.
Did you create new app with cra?

[peterholcomb]

@adirzoari I just ended up add webpack and a webpack config to each of my client apps, then just added an npm script to my package.json called build:federation. So when I run npm run build:federation it kicks off the webpack build and generates the remoteEntry.js file.

For the host app i did have to switch back from vite to webpack and build it.

[leepowellnbs]

Not sure if it's related - but if you add the generate: false option, then this hits the issue too - as the remote attempts to import react for a second time, but the chunk has not been generated.

[danielm2402]

@peterholcomb
Would you mind sharing with me the base configuration of your clients and how you build it to generate the remoteEntry.js? Did you use webpack in the end on host and remote or just an extra configuration for the build?

[peterholcomb]

@danielm2402 Yeah, happy to share these. I will gather them up and try to post them tomorrow. I ended up using webpack on both host/remote and it worked well.

[judithhartmann]

You can notice the issue in the react example application in this repository as well. React is not shared there, even though it is configured to be

[danielm2402]

@peterholcomb
I would be very grateful! I would love to see your solution