React Webpack Host -> React Vite Remote

[dykrupp]

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?

[rchrdschfr]

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

[Go1dExperience]

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.

[AZReed]

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?

[Oterem]

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

[SQReder]

bump this

[taylous]

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.

[adirzoari]

@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?

[SQReder]

@adirzoari Still nope

[vinodhum]

+1, any update on this ?

[emahnovets]

+1

[SQReder]

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>

3) 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")

4) 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