Remote's zustand cannot access useRef when being loaded by host

[pt-hieu]

Hi, I am working on a project which requires enabling module federation between a vite project and a webpack project
So, the thing works fine except the error TypeError: Cannot read properties of null (reading 'useRef')

I am pretty sure that remote still has access to react by loggin useRef out

Error

Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    at react_production_min.useRef (__federation_shared_react.js:33:402)
    at withSelector_production_min.useSyncExternalStoreWithSelector (__federation_expose_Button-737ba6a1.js:98:88)
    at useStore (__federation_expose_Button-737ba6a1.js:117:17)
    at useBoundStore (__federation_expose_Button-737ba6a1.js:134:51)
    at Button (__federation_expose_Button-737ba6a1.js:143:3)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20069:13)
    at beginWork (react-dom.development.js:21582:16)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)

Reproducing

Please use this repo, install zustand by pnpm add zustand and replace content of remote\src\Button.jsx with the following snippet:

import { useState } from "react";

import "./Button.css";
import useCount from "./store";
import { create } from "zustand";

const useA = create(() => ({}))

export const Button = () => {
  useA()
  const [state, setState] = useCount();
  return (
    <div>
      <button className="shared-btn" onClick={() => setState((s) => s + 1)}>
        Click me: {state}
      </button>
    </div>
  );
};

export default Button;

Any idea what is happening is highly appreciated!
Thank you

[pt-hieu]

Found the cause, it's due to zustand having a cjs only package 😞

// import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
// This doesn't work in ESM, because use-sync-external-store only exposes CJS.
// See: https://github.com/pmndrs/valtio/issues/452
// The following is a workaround until ESM is supported.
// eslint-disable-next-line import/extensions
import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'