vite-plugin-federation icon indicating copy to clipboard operation
vite-plugin-federation copied to clipboard

React Webpack Host -> React Vite Remote

Open dykrupp opened this issue 2 years ago • 11 comments

I've been trying to follow the 'vue3-demo-webpack-esm-esm' and apply a similar concept using a React Webpack5 host which consumers a remote exposed from Vite.

Is this supported when the host is using target: 'web' in the webpack.config?

Are there are relevant examples I'm missing here?

dykrupp avatar Nov 21 '22 22:11 dykrupp

I'm also interested in the same setup and haven't got it to work yet.

rchrdschfr avatar Dec 16 '22 16:12 rchrdschfr

Hi. When I use the same setup of webpack host and remote vite, I have an error: cannot use import.meta outside a module in remoteEntry.js. Have you run into the same situation? Was it because I didn't configure vite.config to the correct target, or is it because of my webpack.config? Please let me know and I will share my setup if you need.

Go1dExperience avatar Feb 23 '23 13:02 Go1dExperience

I have the same issue. No solution so far. In my case the error is the exact same as in this other issue https://github.com/originjs/vite-plugin-federation/issues/279. Any news on this?

AZReed avatar May 19 '23 19:05 AZReed

I'm mostly interested in dynamic load of a vite MF when the host is a react webpack5 UI

Oterem avatar May 21 '23 17:05 Oterem

bump this

SQReder avatar Jun 23 '23 08:06 SQReder

i am also experiencing the same problem...

in webpack5 (ex cra, vue-cli), it was because of the splitChunk option, but vite doesn't seem to have that option.

taylous avatar Jul 25 '23 09:07 taylous

@Oterem @SQReder @AZReed @rchrdschfr @taylous @dykrupp I looking the same, React with Webpack as Host and React with Vite as Remote. did you find a solution/an example?

adirzoari avatar Feb 23 '24 00:02 adirzoari

@adirzoari Still nope

SQReder avatar Mar 05 '24 08:03 SQReder

+1, any update on this ?

vinodhum avatar May 06 '24 16:05 vinodhum

+1

emahnovets avatar May 23 '24 18:05 emahnovets

Ok, I've got something. I'm too lazy to make reproduce repo, but following steps should guide you in the right direction:

  1. Use full dynamic MF integration variant
  2. To load the Vite MF create module script tag
<script type="module" src="http://somewhere/assets/remoteEntry.js"></script>
  1. Dynamically import this module using the full URL. Take note of the webpackIgnore: true directive:
const container = await import(/* webpackIgnore: true */ "http://somewhere/assets/remoteEntry.js")
  1. Proceed as usual
await container.init(__webpack_share_scopes__.default);
const factory = await container.get('./ExposedModule');
const module = factory(); // here is external exposed module

I hope you find this helpful

SQReder avatar Jul 06 '24 21:07 SQReder