Bug: ConnectAccount (esm)

[tuler]

Describe the bug and the steps to reproduce it

ModuleBuildError: Module build failed (from ../../node_modules/.pnpm/next@14.2.4_@babel+core@7.24.7_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/next/dist/build/webpack/loaders/next-swc-loader.js):
Error: 
  × The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.
   ╭─[/<my_project>/node_modules/.pnpm/@coinbase+onchainkit@0.22.1_@tanstack+query-core@5.45.0_@types+react@18.3.3_@xmtp+frames-vali_z233vvjdr7prezdn7muxchujsq/node_modules/@coinbase/onchainkit/esm/wallet/components/ConnectAccount.js:1:1]
 1 │ import { useCallback } from 'react';
 2 │ import { useAccount, useConnect, useDisconnect } from 'wagmi';
 3 │ import { jsxs, jsx } from 'react/jsx-runtime';
 4 │ 'use client';
   · ─────────────
 5 │ /**
 6 │  * ConnectAccount
 7 │  *  - Connects to the wallet
   ╰────

What's the expected behavior?

Connect button to render

What version of the libraries are you using?

0.22.1

[PirosB3]

Having same exact issue

[kyhyco]

How do you reproduce this error?

[kyhyco]

ConnectAccount needs to be used in a client component. Looks like you are trying to render the component on the server.

[narteysarso]

@kyhyco I have the same issue with version: 0.22.1.

I am using it in an client side component.

This is my code:

"use client";

import {Identity, Avatar, Name, Badge, Address} from "@coinbase/onchainkit/identity";

const Profile = () => {
    return(
        <Identity
        address="0x838aD0EAE54F99F1926dA7C3b6bFbF617389B4D9"
        schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
      >
        <Avatar />
        <Name>
          <Badge />
        </Name>
        <Address />
      </Identity>
    )
}

export default Profile;

My opinion is that version 0.22.1 has 'use client' directive added to the code. However, the directive is wrongly placed in the code. 'use client' directive should be the first line in the code.

This is a code snippet from <project-path>/node_modules/@coinbase/onchainkit/esm/identity/components/Address.js

import { useIdentityContext } from '../context.js';
import { getSlicedAddress } from '../getSlicedAddress.js';
import { cn, text } from '../../styles/theme.js';
import { jsx } from 'react/jsx-runtime';
'use client';
function Address({
  address = null,
  className
}) {...}

'use client' directive on line 5 should be on line 1.

This is the error on the console:

Import trace for requested module:
./node_modules/@coinbase/onchainkit/esm/identity/components/Address.js
./node_modules/@coinbase/onchainkit/esm/identity/index.js
./components/Identity.tsx
 ⨯ ./node_modules/@coinbase/onchainkit/esm/identity/components/Address.js
Error: 
  × The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.
   ╭─[/home/workstation/projects/loan-app/node_modules/@coinbase/onchainkit/esm/identity/components/Address.js:2:1]
 2 │ import { getSlicedAddress } from '../getSlicedAddress.js';
 3 │ import { cn, text } from '../../styles/theme.js';
 4 │ import { jsx } from 'react/jsx-runtime';
 5 │ 'use client';
   · ─────────────
 6 │ function Address({
 7 │   address = null,
 8 │   className
   ╰────

Import trace for requested module:
./node_modules/@coinbase/onchainkit/esm/identity/components/Address.js
./node_modules/@coinbase/onchainkit/esm/identity/index.js
./components/Identity.tsx

A similar error appears for the other components form @coinbase/onchainkit/identity

@tuler @PirosB3 In the meantime I downgraded to 0.22.0 and the error went away

[tuler]

Happened to me with a client component as well. This change added the use client to the top of the files. But it may be related to how the project is being packaged by packemon (which I've never used).

[kyhyco]

Ah seeing some errors while creating the bundles. Removing usages of use client

[kyhyco]

Aight folks try out the v0.22.2 release

[tuler]

It loads now with 0.22.2

[kyhyco]

sweet!

[PirosB3]

Thank you

---

PirosB3

https://github.com/PirosB3

On Sun, Jun 23, 2024 at 2:01 PM Ky Lee @.***> wrote:

sweet!

— Reply to this email directly, view it on GitHub https://github.com/coinbase/onchainkit/issues/684#issuecomment-2185255157, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGO2S665Q57WWGYUMR4BLTZI4EQDAVCNFSM6AAAAABJXAU2UWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBVGI2TKMJVG4 . You are receiving this because you were mentioned.Message ID: @.***>