[bug] Could not resolve "react" with yarn, vue web3modal

[yooouuri]

Link to minimal reproducible example

https://docs.walletconnect.com/2.0/web3modal/v3/vue/about

Summary

Yarn doesn't install peer dependencies by default, pnpm for example does.

@web3modal/core has valtio as dependency, who has use-sync-external-store as dependency.

use-sync-external-store uses react, but as peerDependency.

So this is a problem for Vue users, they need to install react when using yarn...

List of related npm package versions

"ethers": "^6.12.0",
"@web3modal/ethers": "^4.1.11",

[linear[bot]]

APKT-315 [bug] Could not resolve "react" with yarn, vue web3modal

[glitch-txs]

Can you run this and check the version?

npm ls @web3modal/core

It should be tree shaken

[yooouuri]

@glitch-txs

➜  app git:(main) ✗ npm ls @web3modal/core
@xxxx/xxxx@6.6.4 /Users/xxx/xxx/xxx
└─┬ @web3modal/ethers@4.1.11
  ├─┬ @web3modal/scaffold-utils@4.1.11
  │ └── @web3modal/core@4.1.11
  ├─┬ @web3modal/scaffold@4.1.11
  │ └── @web3modal/core@4.1.11 deduped
  └─┬ @web3modal/siwe@4.1.11
    └── @web3modal/core@4.1.11 deduped

[glitch-txs]

Can you try

yarn add --save-dev react

Since this is a specific issue with yarn + other framework than React, we would like to avoid adding React as a core dependency.

Let me know if this works otherwise we might need to change Valtio for another library

[own2pwn]

@glitch-txs hey, can it be solved without depending on React, even as a dev dep?

[glitch-txs]

It doesn't depend on React, it's tree shaken as it's not used. The issue is with some bundlers that break when they are not installed locally.