Compilation error with wagmi v2 in Next.js

[heyitsarpit]

Error Stack Trace

index.js:627 Uncaught Error: Module not found: ESM packages (@wagmi/connectors) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/.pnpm/@lifi+wallet-management@2.6.1_@types+node@20.2.5_@types+react@18.2.8_bufferutil@4.0.8_encodin_uqzfhbc6fcmqavn6anlzgdie3i/node_modules/@lifi/wallet-management/cjs/wallets.js
./node_modules/.pnpm/@lifi+wallet-management@2.6.1_@types+node@20.2.5_@types+react@18.2.8_bufferutil@4.0.8_encodin_uqzfhbc6fcmqavn6anlzgdie3i/node_modules/@lifi/wallet-management/cjs/index.js
./node_modules/.pnpm/@lifi+widget@2.10.2_@types+node@20.2.5_@types+react@18.2.8_bufferutil@4.0.8_encoding@0.1.13_i_p7e23oxgfqgw2hcjfvhcq6d4su/node_modules/@lifi/widget/cjs/providers/WalletProvider/WalletProvider.js
./node_modules/.pnpm/@lifi+widget@2.10.2_@types+node@20.2.5_@types+react@18.2.8_bufferutil@4.0.8_encoding@0.1.13_i_p7e23oxgfqgw2hcjfvhcq6d4su/node_modules/@lifi/widget/cjs/providers/WalletProvider/index.js
./node_modules/.pnpm/@lifi+widget@2.10.2_@types+node@20.2.5_@types+react@18.2.8_bufferutil@4.0.8_encoding@0.1.13_i_p7e23oxgfqgw2hcjfvhcq6d4su/node_modules/@lifi/widget/cjs/index.js
./ui/Bridge/Lifi/Widget.tsx
./ui/Bridge/Lifi/index.tsx
./ui/Header.tsx
./pages/_app.tsx

Versions

viem - 2.9.21
wagmi - 2.5.20
@lifi/sdk - 2.5.1
@lifi/widget - 2.10.2
next - 14.2.2
typescript - 5.2.2
pnpm - 9.0.6

[chybisov]

@heyitsarpit Hey, widget v2 doesn't support wagmi v2. Please use widget v3.

[heyitsarpit]

@heyitsarpit Hey, widget v2 doesn't support wagmi v2. Please use widget v3.

I see that widget and sdk v3 are in alpha on npm. I suppose it's not safe to integrate them right now?

[chybisov]

@heyitsarpit It is pretty stable, and there shouldn't be any major breaking changes down the line. We will release a beta soon while we prepare documentation for the major release.

[heyitsarpit]

okay thanks I'll look into this.

[heyitsarpit]

@chybisov in the new config(v3), what replaces the walletManagement and containerStyle options?
this is what we are doing currently. and it works with wagmi v2.

      walletManagement: {
        signer: signer,
        connect: async () => {
          const connector = connectors[0]

          await connectAsync({ connector })
          const provider = (await connector.getProvider()) as Web3Provider

          return provider?.getSigner() as Signer
        },
        disconnect: async () => {
          await disconnect()
        },
        switchChain: async (chainId) => {
          await switchChainAsync({
            chainId: chainId as SUPPORTED_CHAINS_IDS
          })
          const client = wagmiConfig.getClient({
            chainId: chainId as SUPPORTED_CHAINS_IDS
          })

          return walletClientToSigner(client)
        }
      }

[chybisov]

@heyitsarpit Please take a look at the Rainbowkit example https://github.com/lifinance/widget/tree/main/examples/rainbowkit

TL;DR You don't have to use walletManagement prop anymore and everything should work out of the box if your app and the widget are wrapped in WagmiProvider. Also, please make sure you configure all the chains in the wagmi config you would like to use with the widget.

[heyitsarpit]

awesome let me test this out

[haroon-schmrkow]

@heyitsarpit the containerStyle prop seems to have moved under theme.container prop now