https://github.com/joulev/custom-server-only-client-only
A server-only and client-only alternative that allows you to customise the error message.
https://github.com/joulev/custom-server-only-client-only
Last synced: 8 days ago
JSON representation
A server-only and client-only alternative that allows you to customise the error message.
- Host: GitHub
- URL: https://github.com/joulev/custom-server-only-client-only
- Owner: joulev
- License: mit
- Created: 2023-03-07T08:37:32.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-07T09:12:24.000Z (over 3 years ago)
- Last Synced: 2025-10-27T19:55:55.183Z (8 months ago)
- Language: TypeScript
- Homepage:
- Size: 50.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# `custom-server-only` and `custom-client-only`
This package is a `server-only` and `client-only` alternative that library authors can use to customise the error message.
## Why?
`server-only` and `client-only` are great if you use it in your own apps. If it's imported in a third party library however, the error message is not so clear to debug anymore.
For example, say I make a library where a particular module must be client-only. If you use the module in a server environment, you get
> This module cannot be imported from a Server Component module. It should only be used from a Client Component.
Since you didn't use `client-only` explicitly, you are left wondering what does "this module" refer to here.
With `custom-server-only` and `custom-client-only` here however, I can customise it to something like
> `"my-package/use-window-size"` cannot be used in a server component. Please use a client component instead. Refer to https://my-package.js.org/use-window-size for more info.
which makes it easier for library users to debug.
## Usage
### `custom-server-only`
```
npm install custom-server-only
```
Before:
```ts
import "server-only";
```
After:
```ts
import ensureServer from "custom-server-only";
ensureServer("Error message here");
```
If you want to use the default error message instead, use `ensureServer()`. (But why don't you use `server-only` directly in that case?)
### `custom-client-only`
```
npm install custom-client-only
```
Before:
```ts
import "client-only";
```
After:
```ts
import ensureClient from "custom-client-only";
ensureClient("Error message here");
```
If you want to use the default error message instead, use `ensureClient()`. You get the idea. (But why don't you use `client-only` directly in that case?)