Consuming a valtio proxy from another package results in "TypeError: proxyState is not iterable"

[iam4x]

Summary

• npm module expose a valtio proxy:

import {createExchange} from 'foo';

const exchange = createExchange();
// exchange.store is a Proxy object from valtio/vanilla

const Component = () => {
  const snap = useSnapshot(exchange.store);
  return (<div>{snap.foo}</div>);
}

This doesn't work and throws:

TypeError: proxyState is not iterable

I've logged: console.log(Object.getOwnPropertyDescriptors(exchange.store)) which outputs:

• I've tried using proxy() from valtio instead of valtio/vanilla
• I've tried npm link the external package
• I'm sure application & package are using same valtio version

Do you have an idea?

[iam4x]

Still debugging, it looks like its importing .mjs and .js packages:

So proxyStateMap is correctly set in one context but not the other

[dai-shi]

It's called dual package hazard. (which is not supported in valtio.)
You have to use only one package.
In the future version of valtio, we may drop .js modules.

[iam4x]

Yeah ok, thank I'll just fork and release another version under my scope, using one package is not an option.
Do you have any guidance? I guess I have just to comment into rollup.config.js the builds I don't want.

[dai-shi]

If you were to fork valtio, defining shared state on globalThis might help.

[iam4x]

Thanks, all good now.
If anyone runs into the same issue: https://www.npmjs.com/package/@iam4x/valtio

[capaj]

I got this error when I use valtio in a pnpm monorepo. running pnpm dedupe fixes this problem.