Import Issues with Wagmi Connector Packages & ethersjs

Getting a weird import error when trying to use wagmi with the modal SDK in nextJS. I tried messing with the packages myself but it would only create a web of further errors. figured I’d ask before I went too far down the rabbit hole

Please provide the following details too when asking for help in this category:

  • SDK Version:

    • @web3Auth/modal ^5.0.1
    • @web3Auth/base ^5.0.1
    • @web3Auth/openlogin-adapter ^5.0.1
    • @web3Auth/web3auth-wagmi-connector ^3.0.1 - latest I could find
    • ethers ^5.7.2
    • wagmi ^0.12.1
  • Platform: NextJS

  • Browser Console Screenshots:

Please provide the Web3Auth initialization and login code snippet below:

./pages/_app.js

import { useEffect, useState } from 'react';
import { WagmiConfig, createClient, configureChains } from "wagmi";
import { mainnet, goerli, polygon, polygonMumbai, optimism, optimismGoerli } from 'wagmi/chains';
import { alchemyProvider } from 'wagmi/providers/alchemy';
import WagmiAuthConnector from '../lib/web3AuthConnector';

...

const initConstruct = async () => {
            try {
                const { chains, provider, webSocketProvider } = configureChains(chainArr, alchemyArr);

                const client = createClient({
                    autoConnect: true,
                    connectors: [
                        WagmiAuthConnector(chains),
                        new WalletConnectConnector({
                            chains,
                            options: {
                                qrcode: true,
                            },
                        }),
                        new InjectedConnector({
                            chains,
                            options: {
                                name: "Injected"
                            }
                        })
                    ],
                    provider,
                    webSocketProvider
                })

                setClient(client)
            } catch(err) {
                console.log(err);
            }
        }

        initConstruct();

./lib/web3AuthConnector.js

import { Web3AuthConnector } from "@web3auth/web3auth-wagmi-connector";
import { Web3Auth } from "@web3auth/modal";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { CHAIN_NAMESPACES } from "@web3auth/base";


export const WagmiAuthConnector = ({ chains }) => {

    const name = "Lynk";

    // Create Web3Auth Instance
    const web3AuthInstance = new Web3Auth({
        clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT,
        chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x"+chains[0].id.toString(16),
            rpcTarget: chains[0].rpcUrls.default.http[0], // This is the public RPC we have added, please pass on your own endpoint while creating an app
            displayName: chains[0].name,
            tickerName: chains[0].nativeCurrency?.name,
            ticker: chains[0].nativeCurrency?.symbol,
            blockExplorer: chains[0]?.blockExplorers.default?.url,
        },
        uiConfig: {
            theme: "dark",
            loginMethodsOrder: ["google", "facebook", "twitter"],
            defaultLanguage: "en",
            // appLogo: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg", // Your App Logo Here
            appName: name,
        },
    });

    // Add openlogin adapter for customisations
    const openloginAdapterInstance = new OpenloginAdapter({
        adapterSettings: {
            network: "testnet",
            uxMode: "popup", 
            whiteLabel: {
                name: name,
                // logoLight: "https://web3auth.io/community/images/w3a-L-Favicon-1.svg",
                // logoDark: "https://web3auth.io/community/images/w3a-D-Favicon-1.svg",
                defaultLanguage: "en",
                dark: theme === "dark" ? true : false, 
            },
        },
    });

    web3AuthInstance.configureAdapter(openloginAdapterInstance);

    return new Web3AuthConnector({
        chains: chains,
        options: {
            web3AuthInstance
        }
    })
};```

@wagmi/core and @web3auth/wagmi-adapter are both esm only packages.
This means you need to follow the steps listed here: Pure ESM package · GitHub

imports need to be with .js file extension