adobe / adobe/react-spectrum

mergeProps doesn't work for Server Components

Open
#6,592 7 comments 1 reaction 0 assignees View on GitHub
enhancement
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

### Provide a general summary of the issue here

Using `mergeProps` in server components gives the following error:
```
Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.
```
The only solution is to mark component with 'use-client' directive.

### 🤔 Expected Behavior?

Being able to use the function in server components.

### 😯 Current Behavior

Can't be used without client components boundary.

### 💁 Possible Solution

Function's implementation is pretty straightforward. It uses [mergeIds](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/utils/src/useId.ts#L69) from `useId.ts`. This function does not use any "client" features, but the file itself imports them. The solution I see is to extract `idsUpdaterMap` and `mergeIds` to another file so it doesn't import any hooks/contexts.

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://stackblitz.com/edit/stackblitz-starters-zsr6u8?file=app%2Fpage.tsx

Here I just import `mergeProps` to a server component. This is enough to raise the error.

### Version

@react-aria/utils 3.24.1

### What browsers are you seeing the problem on?

Other

### If other, please specify.

_No response_

### What operating system are you using?

Windows

### 🧢 Your Company/Team

_No response_

### 🕷 Tracking Issue

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.