adobe / adobe/react-spectrum

Client-only breaks Next.js build

Open
#5,876 12 comments 0 reactions 0 assignees View on GitHub
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

#5826 breaks custom components in Next.js

Using `composeRenderProps` as a util does not work anymore. The below, previously working pattern throws a build error.

```
import { composeRenderProps } from 'react-aria-components';
import { twMerge } from 'tailwind-merge';
import { tv } from 'tailwind-variants';

export const focusRing = tv({
base: 'outline outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2',
variants: {
isFocusVisible: {
false: 'outline-0',
true: 'outline-2',
},
},
});

export function composeTailwindRenderProps(
className: string | ((v: T) => string) | undefined,
tw: string
): string | ((v: T) => string) {
return composeRenderProps(className, (className) => twMerge(tw, className));
}
```

### 🤔 Expected Behavior?

App should build

### 😯 Current Behavior

```
./src/lib/utils.ts
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.

The error was caused by importing 'react-aria-components/dist/import.mjs' in './src/lib/utils.ts'.

Import trace for requested module:
./src/lib/utils.ts
./src/app/(site)/layout.tsx
```

### 💁 Possible Solution

Need to create 2 separate files for utils. 1 of them should be marked with `"use client"`.

```utils-client.ts
'use client';

import { composeRenderProps } from 'react-aria-components';
import { twMerge } from 'tailwind-merge';

export function composeTailwindRenderProps(
className: string | ((v: T) => string) | undefined,
tw: string
): string | ((v: T) => string) {
return composeRenderProps(className, (className) => twMerge(tw, className));
}
```

```utils.ts
import { tv } from 'tailwind-variants';

export const focusRing = tv({
base: 'outline outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2',
variants: {
isFocusVisible: {
false: 'outline-0',
true: 'outline-2',
},
},
});
```

### 🔦 Context

_No response_

### 🖥️ Steps to Reproduce

https://codesandbox.io/p/devbox/spring-http-yq2y79

### Version

v1.1.0

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

Other

### If other, please specify.

_No response_

### What operating system are you using?

macOS

### 🧢 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.