Shared dependencies in React

[rubenberna]

Hi,

In my remote project, I'm installing packages from a private registry (Azure artifacts), together with regular packages from npmjs.

remote/vite.config

import { federation } from '@module-federation/vite';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import { dependencies } from './package.json';

export default defineConfig(({ mode }) => {
	return {
		server: {
			fs: {
				allow: ['.', '../shared']
			}
		},
		build: {
			target: 'chrome89'
		},
		plugins: [
			federation({
				filename: 'remoteEntry.js',
				name: 'remote',
				exposes: {
					'./remote-app': './src/App.jsx'
				},
				remotes: {},
				shared: {
					react: {
						requiredVersion: dependencies.react,
						singleton: true
					}
				}
			}),
			react()
		]
	};
});

When I run the app in isolation, nothing is rendered in the browser and there's no build error either.

However, if I remove the shared dependencies object, it runs in isolation, but when importing it from the Host, there's an error in the browser, because there's more than one React instance:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons (...)

Thanks for your help.

[gioboa]

Hi @rubenberna
Yep, you can't have two instances at the same time, you need to share react

[rubenberna]

Hi @gioboa,

Thank you for building this tool first of all.

The problem when I bring the dependencies from package.json in that remote's config, is that some dependencies are from a private registry, so it seems that the plugin can't resolve them? -- it doesn't throw an error, but it also doesn't render the app in the browser.

Is there a way to resolve this type of setup? Or should I hardcode React's version? It would be great if most of the dependencies would be shared though.

Thanks

[gioboa]

You can simply define the dependency without the specific version.

FYI few days ago the Rolldown and Vite team officially announced the official micro frontend support. So you should keep your eyes on it