Setting state value to web3 instance triggers Illegal invocation

[LookRain]

I'm using Valtio with web3.js, while trying to set a state value to a web3 instance, I got an unhandled runtime error. TypeError: Illegal invocation

Here's my code setup:

import Web3 from 'web3';

export const store = proxy({
  web3: undefined,
});


if (window.ethereum) {
      const web3 = new Web3(window.ethereum);
      store.web3 = web3;
}

The error stack(from next.js):

vanilla.js?baaa:65 Uncaught (in promise) TypeError: Illegal invocation
    at Reflect.get (<anonymous>)
    at eval (vanilla.js?baaa:65:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at eval (vanilla.js?baaa:84:1)
    at Array.forEach (<anonymous>)
    at createSnapshot (vanilla.js?baaa:64:1)
    at Object.get (vanilla.js?baaa:102:1)
    at snapshot (vanilla.js?baaa:202:65)
eval @ vanilla.js?baaa:65
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
eval @ vanilla.js?baaa:84
createSnapshot @ vanilla.js?baaa:64
get @ vanilla.js?baaa:102
snapshot @ vanilla.js?baaa:202
eval @ index.js?fa10:119
eval @ vanilla.js?baaa:192
Promise.then (async)
listener @ vanilla.js?baaa:190
eval @ vanilla.js?baaa:35
notifyUpdate @ vanilla.js?baaa:35
set @ vanilla.js?baaa:158
(anonymous) @ VM7096:1
Show 9 more frames

[LookRain]

Using ref still triggers the same error

store.web3 = ref(web3);

[dai-shi]

Using ref still triggers the same error

Does it not? Seems like a valid solution. Can you reproduce it with codesandbox without nextjs? (https://react.ts.new)

[x-EricH-x]

Using ref still triggers the same error

Does it not? Seems like a valid solution. Can you reproduce it with codesandbox without nextjs? (https://react.ts.new)

I had the same issue, and ref does seem to resolve it. Any ideas on why ref is needed?

P.S. Thanks for the great work on valtio

[dai-shi]

https://codesandbox.io/s/damp-leftpad-ehl79r?file=/src/App.tsx I don't see any errors. Does it only happen with MetaMask installed?

[x-EricH-x]

possibly, I am moving forward with my proj atm, but can try to setup a repo later when I have time.

[dai-shi]

Closing as stale.