coinbase / coinbase/onchainkit

Bug: Can't use functions runnable on the server that are exported alongside client components

Open
#731 3 comments 1 reaction 0 assignees View on GitHub
Dominant language
TypeScript
Stars
1k
Forks
520
Avg merge
32m
Merged PRs (30d)
2

Description

### Describe the bug and the steps to reproduce it

This is related to an issue someone had on Discord https://discord.com/channels/1220414409550336183/1255514874860273708

Currently, module entrypoints export both functions runnable on the server and client components which makes Next.js not happy.

Here's a reproduction https://stackblitz.com/edit/stackblitz-starters-bmjcpd?file=app%2Fpage.tsx

Server components enable to do server-side actions directly inside React components, i.e.

```tsx
export default async function MyPage() {
const users = await db.users.select();
}
```

FWIW I'm not really fan of this but that's the direction things are heading.

So there are issues when trying to use things like `getAttestations()` in server components because `@coinbase/onchainkit/identity` also exports client components.

This should be fixable by separating exports to something like

- `@coinbase/onchainkit//core` and `@coinbase/onchainkit//react`
- `@coinbase/onchainkit//core` and `@coinbase/onchainkit/` which exports components
- `@coinbase/onchainkit/core` for all server side functions and `@coinbase/onchainkit/` for client components

I find the 3rd option more intuitive as a consumer because of the clear distinction.

### What's the expected behavior?

_No response_

### What version of the libraries are you using?

0.23.2

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the module entrypoints involved in @coinbase/onchainkit/identity and the getAttestations export, then reproduce the problem using the linked StackBlitz example in a Next.js server component. Review how server functions and client components are currently exported and choose an export structure that lets server components import getAttestations without the client-component conflict while preserving client component imports.

Written by the indexing model from the issue text.

Assessment

Tech stack
next.js, react, typescript
Domain
api, frontend
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.