WalletConnect fails to get bundled with vite

Question

I have a vite project that uses @walletconnect/client. Everything works fine with

npm run dev

but during build (npm run build) I get these errors

error during build:
Error: 'removeHexPrefix' is not exported by node_modules/@walletconnect/encoding/dist/cjs/index.js, imported by node_modules/@walletconnect/utils/dist/esm/ethereum.js

I have tried a few vite configurations from github

1.

optimizeDeps: {
    include: ['@walletconnect/*']
  },

2. optimizeDeps: { exclude: ['@walletconnect/*'] },

3

build: {
    commonjsOptions: {exclude: ['@walletconnect*'], include: []},
  },

I do not know anything else to do, but if you have come across this issue or something similar. Please let me know how you solved yours.

Thank you.

Answer 1

Had the same issue (I highly suggest you to check it out). Fixed with this config:

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { NodeGlobalsPolyfillPlugin } from "@esbuild-plugins/node-globals-polyfill";
import inject from "@rollup/plugin-inject";
import nodePolyfills from "rollup-plugin-polyfill-node";

// https://vitejs.dev/config/
export default defineConfig({
  base: "./",
  // Node.js global to browser globalThis
  define: {
    global: "globalThis",
  },
  plugins: [
    svelte(),
    inject({
      util: "util/",
    }),
  ],
  build: {
    rollupOptions: {
      plugins: [nodePolyfills()],
    },
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
  optimizeDeps: {
    esbuildOptions: {
      // Node.js global to browser globalThis
      define: {
        global: "globalThis",
      },
      // Enable esbuild polyfill plugins
      plugins: [
        NodeGlobalsPolyfillPlugin({
          buffer: true,
        }),
      ],same issue
    },
  },
});```