Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error: To use QR modal, please install @walletconnect/modal package #2006

Closed
1 task done
yisacc opened this issue Nov 22, 2023 · 2 comments
Closed
1 task done

Error: To use QR modal, please install @walletconnect/modal package #2006

yisacc opened this issue Nov 22, 2023 · 2 comments
Assignees
Labels
bug Something isn't working

Comments

@yisacc
Copy link
Contributor

yisacc commented Nov 22, 2023

Current Behavior

Description

When using the @web3-onboard/walletconnect package with Vite, the package works as expected in development mode. However, when building the application for production, the following error is thrown: "To use QR modal, please install @walletconnect/modal package".

Actual Behavior

The @walletconnect/modal package is not included in the production build, causing the application to throw an error when trying to use it.

Possible Solution

I've tried to force Vite to include the package in the build using the optimizeDeps.include option in the vite.config.js file, but this did not resolve the issue.

Additional Context

Here's the relevant part of my vite.config.ts file:

import solid from "solid-start/vite";
import UnoCSS from "unocss/vite";
import { defineConfig } from "vite";
import solidPlugin from "vite-plugin-solid";
import solidSvg from "vite-plugin-solid-svg";
import tsconfigPaths from "vite-tsconfig-paths";
import process from "node:process";

export default defineConfig({
  plugins: [
    // my plugins...
  ],
  optimizeDeps: {
    include: ["@walletconnect/modal", "@web3-onboard/walletconnect"]
  }
  // rest of my config...
});

### Expected Behavior

The `@walletconnect/modal` package should be included in the production build and work as expected, just like in development mode.

### Steps To Reproduce

1. Install `@walletconnect/modal` and `@web3-onboard/walletconnect` in a Vite project.
2. Use the package in the application.
3. Run the application in development mode - everything works as expected.
4. Build the application for production.
5. Serve the production build locally.
6. Observe the error message.

note: I am initializing onboard if it is not server 

### What package is effected by this issue?

@web3-onboard/core

### Is this a build or a runtime issue?

Build

### Package Version

2.7.15

### Node Version

18.16.0

### What browsers are you seeing the problem on?

Chrome

### Relevant log output

```shell
N/A

Anything else?

No response

Sanity Check

  • If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.
@yisacc yisacc added the bug Something isn't working label Nov 22, 2023
@yisacc
Copy link
Contributor Author

yisacc commented Nov 23, 2023

I have created a pr to solve this issue here

@Adamj1232
Copy link
Member

Thank you @yisacc your PR and fix has been released with the latest WC package

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants