Issue with creating a package with valtio utils

[italodeandra]

I have this package with all my reusable front-end components.

I created this util for Valtio (for cookies + SSR hydration):

import { setCookie } from "cookies-next";
import { snapshot, subscribe } from "valtio";

export default function createStateHydration(cookieName: string, state: any) {
  subscribe(state, () => {
    setCookie(cookieName, snapshot(state));
  });

  return function hydrate(cookies?: { state?: string }) {
    if (cookies?.[cookieName as keyof typeof cookies]) {
      try {
        let cookieValueString = cookies[
          cookieName as keyof typeof cookies
        ] as string;
        let cookieValue = JSON.parse(cookieValueString);
        if (typeof cookieValue === "object") {
          Object.assign(state, cookieValue);
        }
      } catch (e) {
        // do nothing
      }
    }
  };
}

But if I import this function from the package on my project:

import { proxy } from "valtio";
import createStateHydration from "@italodeandra/ui/utils/createStateHydration";

const authState = proxy({
  token: null as string | null,
});

export const hydrateAuthState = createStateHydration("auth", authState);

export default authState;

I get the error:

Please use proxy object
TypeError: Cannot read properties of undefined (reading '4')
    at subscribe (C:\Users\Italo\Desktop\auth\node_modules\valtio\vanilla.js:214:43)
    at createStateHydration (C:\Users\Italo\Desktop\auth\node_modules\@italodeandra\ui\utils\createStateHydration.js:7:28)
    at eval (webpack-internal:///./lib/auth.state.ts:18:108)

But if I copy the util to the project itself instead of importing from the package, it works.

Is there some kind of known problem doing that?

[dai-shi]

I think you are using two copies of valtio package. Maybe due to wrong monorepo setup?

[italodeandra]

Actually there's only one copy of valtio, you can check my package-lock.json:

package-lock.json.txt

[italodeandra]

I noticed I have the same issue if I try to snapshot a proxy created on a package. What is the correct way of using valtio on a monorepo-like setup? (It's not actually as monorepo).

Currently I need to do like this on my package site:

export const useAuthSnapshot = () => useSnapshot(authState);

[dai-shi]

Is it the mix of ESM / CJS? (It's a known issue, but thought it's rare.)