Uncaught TypeError: Cannot read properties of null (reading 'useRef')

[amh6281]

// Host, Remote package.json
"dependencies": {
  "@originjs/vite-plugin-federation": "^1.4.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "zustand": "^5.0.5"
},

I'm currently building a micro frontend architecture using @originjs/vite-plugin-federation and Zustand for state management.

✅ This setup works correctly:

// useCount.ts (Remote)
import { create } from "zustand";

export const useCountStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// App.tsx (Remote)
import { useCountStore } from "./store/useCount";

const App = () => {
  const { count, increment, decrement } = useCountStore();

  return (
    <div>
      <h1>zustand</h1>
      <p>{count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
};

export default App;

When the remote app is loaded in the host, everything works as expected.

❌ But this setup throws an error:

// useCount.ts (Remote)
import { createWithEqualityFn } from "zustand/traditional";

const deepEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);

export const useCountStore = createWithEqualityFn(
  (set) => ({
    count: 0,
    increment: () => set((state) => ({ count: state.count + 1 })),
    decrement: () => set((state) => ({ count: state.count - 1 })),
  }),
  deepEqual
);

This results in the following runtime error when used inside the host app:

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at react_production.useRef (react.production.js:527:33)
    at withSelector_production.useSyncExternalStoreWithSelector (with-selector.production.js:30:17)
    at useStoreWithEqualityFn (traditional.mjs:9:17)
    at useBoundStoreWithEqualityFn (traditional.mjs:21:85)
    ...

❓ Question
Is there a way to use createWithEqualityFn safely within a Module Federation setup using @originjs/vite-plugin-federation?

Why does createWithEqualityFn cause a useRef null error, while create works fine?

Any guidance or workaround would be greatly appreciated!

[dai-shi]

I think it's because zustand/traditional depends on use-sync-external-store. There might be two instances of it.

[amh6281]

I think so too. Is there no solution?

[dbritto-dev]

@amh6281 you need to install use-sync-external-store and define it as external dep

[amh6281]

Adding zustand/traditional to shared worked! Thank you!