[bug] CoinbaseWalletSDK is not a constructor error on development env using vite

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.3.1

Current Behavior

Can’t use CoinbaseWalletConnector with Vitejs on development.

Expected Behavior

It shouldn’t give error on development env.

Steps To Reproduce

create a vite react-ts app. After that:

package.json:

{
  "name": "wagmitestvite",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "ethers": "^5.6.4",
    "lodash-es": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "util": "^0.12.4",
    "wagmi": "^0.3.1"
  },
  "devDependencies": {
    "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@vitejs/plugin-react": "^1.3.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.5"
  }
}

vite.config.ts:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import NodeGlobalsPolyfillPlugin from "@esbuild-plugins/node-globals-polyfill";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    optimizeDeps: {
        esbuildOptions: {
            // Node.js global to browser globalThis
            define: {
                global: 'globalThis',
            },
            // Enable esbuild polyfill plugins
            plugins: [
                NodeGlobalsPolyfillPlugin({
                    buffer: true
                })
            ]
        }
    }
})

tsconfig.json:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["./src"]
}

main.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import {InjectedConnector} from 'wagmi/connectors/injected'
import {WalletConnectConnector} from 'wagmi/connectors/walletConnect'
import {CoinbaseWalletConnector} from 'wagmi/connectors/coinbaseWallet'
import {Chain, createClient as createWagmiClient, WagmiProvider} from 'wagmi';
import {getDefaultProvider, providers} from "ethers";

const chains = [
    {
        id: 56,
        name: 'Binance Smart Chain',
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18,
        },
        rpcUrls: {
            default: 'https://bsc-dataseed.binance.org',
            default2: "https://bsc-dataseed1.defibit.io/",
            default3: "https://bsc-dataseed1.ninicoin.io/"
        },
        blockExplorers: {
            etherscan: {
                name: 'BNB Smart Chain Explorer',
                url: 'https://bscscan.com'
            },
            default: {
                name: 'BNB Smart Chain Explorer',
                url: 'https://bscscan.com'
            }
        }
    }
]

export const coinbaseWalletConnector = ({chainId}: { chainId?: number | undefined }) => new CoinbaseWalletConnector({
    chains,
    options: {
        appName: "wagmi",
        chainId: chainId,
        jsonRpcUrl: "https://bsc-dataseed.binance.org"
    }
});

export const injectedConnector = new InjectedConnector({
    chains,
    options: {
        shimDisconnect: true
    }
});

export const walletConnectConnector = ({chainId}: { chainId?: number | undefined }) => new WalletConnectConnector({
    chains,
    options: {
        chainId,
        qrcode: true,
    },
})

const connectors = (config: { chainId?: number | undefined }) => {
    return [
        injectedConnector,
        coinbaseWalletConnector(config),
        walletConnectConnector(config)
    ]
}

const provider = ({chainId}: { chainId?: number | undefined }): any => {
    if (!chainId) return getDefaultProvider();
    const chain = chains.find((tempChain) => tempChain.id === chainId) as Chain;
    const providerUrl = chain.rpcUrls.default;

    const jsonRpcProvider = new providers.JsonRpcProvider(providerUrl, chainId);

    return jsonRpcProvider
}

const wagmiClient = createWagmiClient({
    autoConnect: true,
    connectors,
    provider
});


ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
        <WagmiProvider client={wagmiClient}>
            <App/>
        </WagmiProvider>
    </React.StrictMode>
)

App.tsx:

import React from 'react';
import './App.css';
import {useAccount, useBalance, useConnect} from "wagmi";

function Balance() {
    const {data: account, isError: isErrorAccount, isLoading: isErrorLoading} = useAccount()
    const {data: balance, isError: isErrorBalance, isLoading: isLoadingBalance} = useBalance({
        addressOrName: account?.address,
    })

    if (isErrorLoading) return <div>Loading account…</div>
    if (isErrorAccount) return <div>Error loading account</div>

    if (isLoadingBalance) return <div>Fetching balance…</div>
    if (isErrorBalance) return <div>Error fetching balance</div>

    return (
        <div>
            <b>Account:</b> {account?.address}
            <br/>
            <b>Balance:</b> {balance?.formatted}
        </div>
    )
}

function App() {
    const {connect, isConnected, connectors} = useConnect();

    return (
        <div className="App">
            <header className="App-header">
                {
                    connectors.map(connector => (
                        <button key={connector.id} onClick={() => connect(connector)}>{connector.name} CONNECT</button>
                    ))
                }
                {isConnected && <Balance/>}
            </header>
        </div>
    );
}

export default App;

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

It might happen because of using pnpm as package manager, idk

[cesargdm]

@tmm @jcheese1 @ilterugur

For some wired reason, vite is making a nested default export for Coinbase. Tried using yarn, pnpm and npm and all fail. So I would guess that Vite is the issue.

If I try to import the module directly in my app there’s not double default.

Left, import directly in app. Right, current module

---

Notice the property default repeated twice with the raw import without accessing default first. If I access the default property twice, the connector works.

---

[tmm]

@cesargdm good find! seems related to https://github.com/vitejs/vite/issues/7112