ERROR in ./node_modules/@wagmi/connectors/node_modules/@coinbase/wallet-sdk/dist/sign/walletlink/WalletLinkSigner.js

[oehm-smith]

ERROR in ./node_modules/@wagmi/connectors/node_modules/@coinbase/wallet-sdk/dist/sign/walletlink/WalletLinkSigner.js 323:30-63
Can't import the named export 'hashForSignTypedDataLegacy' (imported as 'eip712') from default-exporting module (only default export is available)
ERROR in ./node_modules/@wagmi/connectors/node_modules/@coinbase/wallet-sdk/dist/sign/walletlink/WalletLinkSigner.js 324:30-60
Can't import the named export 'hashForSignTypedData_v3' (imported as 'eip712') from default-exporting module (only default export is available)
ERROR in ./node_modules/@wagmi/connectors/node_modules/@coinbase/wallet-sdk/dist/sign/walletlink/WalletLinkSigner.js 325:30-60
Can't import the named export 'hashForSignTypedData_v4' (imported as 'eip712') from default-exporting module (only default export is available)
ERROR in ./node_modules/@wagmi/connectors/node_modules/@coinbase/wallet-sdk/dist/sign/walletlink/WalletLinkSigner.js 326:27-57
Can't import the named export 'hashForSignTypedData_v4' (imported as 'eip712') from default-exporting module (only default export is available)

I have been given a web3 app (generated using CreateReactApp - CRA) to add Wagmi wallet connectors etc... to. It's pretty plain at this stage, however this error is happening. Any ideas?

I'm guessing this is a problem with CRA. But given it is not really my project I can't go and change to use Vite for example.

I tried https://stackoverflow.com/questions/69343038/cant-import-the-named-export-xxxx-from-non-ecmascript-module-only-default-expo by modifying ./node_modules/react-scripts/config/webpack.config.js but doesn't fix it.

Code as per https://wagmi.sh/react/guides/connect-wallet#build-your-own (slight file naming variations).

NOTE that I am not using (Coin) base.

// wallet/connectors.js

import {createConfig, http} from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
import { injected, metaMask, safe, walletConnect } from 'wagmi/connectors'

const projectId = 'abcdefghi'

export const config = createConfig({
  chains: [mainnet, sepolia], //, bsc],
  connectors: [
    injected(),
    walletConnect({ projectId }),
    metaMask(),
    safe(),
  ],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    // [bsc.id]: http(rpcURL),
  },
})

// wallet/Account.js

import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi'

export function Account() {
    const { address } = useAccount()
    const { disconnect } = useDisconnect()
    const { data: ensName } = useEnsName({ address })
    const { data: ensAvatar } = useEnsAvatar({ name: ensName })

    return (
        <div>
            {ensAvatar && <img alt="ENS Avatar" src={ensAvatar} />}
            {address && <div>{ensName ? `${ensName} (${address})` : address}</div>}
            <button onClick={() => disconnect()}>Disconnect</button>
        </div>
    )
}

//App.js

import {Route, BrowserRouter as Router, Routes} from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import MyStakes from "./pages/MyStakes";
import Navbar from "./components/footer/Navbar";
import {bsc} from "wagmi/chains";
import Footer from "./components/footer/Footer.js";
import {config} from "./wallet/connectors";
import {WagmiProvider} from 'wagmi'
import { useAccount, useConnect } from 'wagmi'
import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import { Account } from './wallet/Account'

export function WalletOptions() {
    const { connectors, connect } = useConnect()

    return connectors.map((connector) => (
        <button key={connector.uid} onClick={() => connect({ connector })}>
            {connector.name}
        </button>
    ))
}

const queryClient = new QueryClient()

function ConnectWallet() {
    const { isConnected } = useAccount()
    if (isConnected) return <Account />
    return <WalletOptions />
}

function App() {
    return (
        <div>
            <Router>
                <WagmiProvider config={config}>
                    <QueryClientProvider client={queryClient}>
                        <section className="wrapper">
                            <Navbar/>
                            <main style={{flex: "auto"}}>
                                ...
                            </main>
                            <Footer/>
                        </section>
                    </QueryClientProvider>
                </WagmiProvider>
                <ConnectWallet/>
                {/*<Web3Modal projectId={projectId} ethereumClient={ethereumClient} />*/}
            </Router>
        </div>
    );
}

export default App;

[rahul-pith1331]

I am facing same problem in it.