coinbase / coinbase/onchainkit
Bug: Can't use functions runnable on the server that are exported alongside client components
- 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