Component not re-rendering with module federated components.

[np1616]

Summary

I have a vite application with the vite-module-federation plugin I have a button component and a jotai hook that im exporting out.
When I update the state only one of the buttons updates and not both, I can see the localStorage of the application changing as I increment the count, and when i refresh the page they use the localStorage and are the same, but when i press one it should update/rerender the other but it doesnt seem to.

The Button

import { useUser } from '../stores/UserAtom';

export default function Button() {
	const [user, setUser] = useUser();
	return (
		<div>
			<button onClick={() => setUser({ ...user, count: user.count + 1 })}>
				Remote Component Click Me: {user.count}
			</button>
		</div>
	);
}

The Atom

export const userAtom = atomWithStorage<User>('userAtom', {
	username: 'Username',
	email: '[email protected]',
	type: 'superadmin',
	language: 'en',
	dob: dayjs('1234 01 20'),
	count: 0,
});

export const useUser = () => useAtom(userAtom);

The Remote Config

export default defineConfig({
	plugins: [
		react(),
		federation({
			name: 'core',
			filename: 'remoteEntry.js',
			exposes: {
				'./Button': './src/components/Button',
				'./user': './src/stores/UserAtom',
			},
			shared: ['react', 'react-dom', 'jotai'],
		}),
	],
	server: {
		host: 'localhost',
		port: 8002,
	},
	build: {
		target: 'esnext',
	},
});

The Host Config

export default defineConfig({
	plugins: [
		react(),
		federation({
			name: 'host',
			filename: 'remoteEntry.js',
			remotes: {
				core: 'http://localhost:8002/dist/assets/remoteEntry.js',
			},
			exposes: {},
			shared: ['react', 'react-dom'],
		}),
	],
	server: {
		host: 'localhost',
		port: 8001,
	},
	build: {
		target: 'esnext',
	},
});

The Host

import Button from 'core/Button';
import { useUser } from 'core/user';
import './App.css';

function App() {
	const [user, setUser] = useUser();

	return (
		<div>
			<h1>HOST APP</h1>
			<Button />
			<button onClick={() => setUser({ ...user, count: user.count + 1 })}>
				Click Me: {user.count}
			</button>
		</div>
	);
}

export default App;

[dai-shi]

Can anyone help?

I think, if there are two jotai instances in memory, it behaves unexpectedly.

[np1616]

This may or may not be the place but I have also had issue doing this same setup but with zustand, I have to use the deprecated create function as the other cannot be found then I get a Cannot read properties of null (reading 'useRef') when using a zustand hook call

[dai-shi]

That sounds like a different issue from what I noted as multiple instances. (because zustand doesn't have module state unlike jotai.)

[np1616]

I probably should have added earlier but I did this following a Jack Herrington Youtube vid showing this as an example and he had it working in that with jotai 2.0.3 so not sure if there has been updates since then or if I am missing something.

[dai-shi]

Hmm, it shouldn't be changed since 2.0.3, or you can try with 2.0.3.

[np1616]

yea just tried and no luck If i have same page open in another tab then the other tab will update both buttons correctly but not within the same tab

[np1616]

Just wondering if anyone had any ideas on this, tried just using a regular atom and still the same issue. When using the atomWithStorage its overwriting the atom in the localStorage with the different button counts so they seem to be looking at the same key for the atom but not re-rendering on count change in the same window.

[fabianboerner]

Also an issue here so, how is it possible to slove?