[bug] Does Web3Modal v3 have to rely on React?

[hhun]

Link to minimal reproducible example

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

Summary

When Vue does not use react, an error will be reported when running Web3Modal v3.0.0 Could not resolve "react" Vue不使用React时，运行Web3Modal v3.0.0 会报错 Could not resolve "react"

When html runs Web3Modal v3.0.0, an error message Could not resolve "react" html 运行 Web3Modal v3.0.0 会报错 Could not resolve "react"

Does Web3Modal v3 have to rely on React? Web3Modal v3必须依赖React吗？

List of related npm package versions

{
    "name": "Web3Modal-V3",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "^3.3.4",
        "@wagmi/core": "^1.4.1",
        "@web3modal/wagmi": "3.0.0-alpha.6",
        "viem": "^1.10.8"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.2.3",
        "vite": "^4.4.5"
    }
}

[xzilja]

No, might be missing an optional peerDependency config here, will have a look 👍

[hhun]

No, might be missing an optional peerDependency config here, will have a look 👍

How to setup peerDependency ? 请问 peerDependency 要怎么设置？

[xzilja]

This is something we will address on our end for next alpha release, you shouldn't need to do anything extra once it is fixed 👍

[xzilja]

Should be fixed in alpha.8, let me know if you are still seeing this issue (make sure to install dependencies fresh)

[hhun]

{
    "name": "Web3Modal-V3",
    "private": true,
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "vue": "^3.3.4",
        "@wagmi/core": "^1.4.1",
        "@web3modal/wagmi": "3.0.0-alpha.8",
        "viem": "^1.10.8"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.2.3",
        "vite": "^4.4.5"
    }
}

Using 3.0.0-alpha.8 will still report an error Could not resolve "react" 使用 3.0.0-alpha.8 依然会报错 Could not resolve "react"

请问要怎么解决这个问题？ Please tell me how to solve this problem？

.

warning "@wagmi/core > abitype@0.8.7" has unmet peer dependency "typescript@>=5.0.4". warning "@wagmi/core > zustand > use-sync-external-store@1.2.0" has unmet peer dependency "react@^16.8.0 || ^17.0.0 || ^18.0.0".

[xzilja]

@hhun could you create a sandbox with minimal reproduction where this error can be investigated please

[xzilja]

I've released alpha.9 with an updated import for one of the dependencies that could've needed react. Can you please try it out. Here is simple vue project where I was able to run it with no issues (make sure to add your project id in App.vue):

https://stackblitz.com/edit/vitejs-vite-jekevf?file=src%2FApp.vue

[hhun]

I've released alpha.9 with an updated import for one of the dependencies that could've needed react. Can you please try it out. Here is simple vue project where I was able to run it with no issues (make sure to add your project id in App.vue):

https://stackblitz.com/edit/vitejs-vite-jekevf?file=src%2FApp.vue

After using npm install to initialize the project, using yarn dev will not report an error After using yarn install to initialize the project, using yarn dev will report an error

I don’t know if it’s because yarn is not compatible with peerDependencies

[xzilja]

It most probably is, especially if you are not using latest yarn.

[hhun]

It most probably is, especially if you are not using latest yarn.

I'm using v1.22.19, is the latest version

[xzilja]

I believe yarn v1 is no longer maintained? They are on versin 3 or 4 now probably on their new packages.

[vitusha-rat]

I'm using yarn v3 and face same problems

[glitch-txs]

Hi @vitusha-rat , could you try adding this to the package.json file?

"optionalDependencies": {
    "react": ">=17",
    "react-dom": ">=17"
  },

[hhun]

@vitusha-rat After adding optionalDependencies in package.json, it can run normally.

    "optionalDependencies": {
        "react": ">=17",
        "react-dom": ">=17",
        "typescript": ">=5.0.4"
    }

[vitusha-rat]

@hhun @glitch-txs Thanks! Works now:)

[yucheng-Li]

@xzilja It is not work for me in vue2, has any other method solve it?

[glitch-txs]

@yucheng-Li feel free to open a new issue stating your problem or a GitHub discussion, you can tag me there too, thanks!