Why do we need to include react and react-dom in react-in-vue example?

[antran-mwb]

In the react-in-vue example, where the host app is Vue, the package.json has react and react-dom included alongside vue. How come that is required when doing a production build but not when doing a local dev build? Shouldn't the shared field in module federations provide us react and react-dom? Wouldn't this also increase the Vue project's app bundle?

[ST0RM-Z]

In a scenario where you have a Vue application hosting a React component using Module Federation, the inclusion of React and React DOM in the package.json of the Vue app is required during production build, but not during local development build. Let's understand why:

During local development, the Vue application and the React component are typically built and run separately. The development server for the Vue app and the development server for the React component are started independently. Since they are separate projects, they have their own package.json files and manage their dependencies separately. In this case, React and React DOM are not required in the package.json of the Vue app because they are only needed by the React component, which has its own package.json.

However, during production build, the Vue application and the React component are built together, and the Vue application serves as the host for the React component. In this case, the Vue application needs to have the dependencies of the React component (i.e., React and React DOM) in its package.json because they will be bundled together into a single production bundle. The shared field in Module Federation configuration allows the Vue application to load React and React DOM from a shared location (e.g., a CDN or another server), avoiding duplication of these dependencies in the final bundle. This configuration ensures that the Vue project's app bundle size is not significantly increased by including React and React DOM. Instead, they are loaded from a shared location, reducing duplication and optimizing the bundle size.

So, in summary, during local development, the Vue app and React component are separate projects, and their dependencies are managed independently. During production build, the Vue app hosts the React component and includes the React dependencies to create a single bundle, while the shared field in Module Federation configuration allows loading them from a shared location to avoid duplication and optimize the bundle size.

[antran-mwb]

Is this due to how ESM and Vite/Rollup works under the hood? If I have two separate Repos where one is a Vue project and the other is a React project, my package.json doesn't currently require me to include React/React DOM when using Webpack and module federation.

In the react-in-vue example, had they been separate Repos with independent builds, would it the Vue repo still require to have React/React DOM in the package.json?