Rehackt: React Server Components Hook Hider

0.1.0 · active · verified Sun Apr 19

Rehackt is an advanced utility library designed for JavaScript/TypeScript library developers working with Next.js and React Server Components (RSC). Its primary function is to invisibly wrap the `react` package, allowing shared imports that contain React hooks (e.g., `useState`, `useEffect`) to be used in server-side Next.js codebases without triggering static analysis errors from the Next.js build process. This prevents common build failures where RSC compilers erroneously flag client-side hooks in modules that are not intended for server-side execution but are imported into a server context. The package is currently at version `0.1.0` and appears to have an active, albeit niche, release cadence driven by changes in React's internal APIs related to RSC. Its key differentiator is solving a specific interop problem for libraries that need to expose both client and server functionalities and manage the RSC static analysis rules without extensive code splitting or dual packages. It does not enable actual hook execution on the server; it only circumvents build-time errors.

Common errors

```
ReactServerComponentsError: You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
```
cause A module containing a client-side React hook (e.g., `useState`) is being imported into a server-side file or a module that is transitively imported by a server-side file, triggering a static analysis error by the Next.js build process.

fix Replace the import of client-side React hooks (e.g., `import { useState } from "react";`) with `import { useState } from "rehackt";` in the shared module.

Warnings

gotcha Rehackt is an advanced tool primarily intended for library developers to solve specific interop issues with Next.js Server Components. It is not generally recommended for application-level code.
Fix: Only use this package if you are developing a library that needs to share code with client-side hooks across client and server boundaries in a Next.js application without triggering RSC static analysis errors.
breaking React 19 Canary renamed internal fields `__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED` to `__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE` and `__SERVER_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE`. Older versions of `rehackt` might break when used with React 19 Canary.
Fix: Upgrade to `rehackt@0.1.0` or newer to ensure compatibility with React 19 Canary, which adds `undefined` exports for potentially missing React internals.
gotcha Using `rehackt` does NOT enable the usage of React hooks (like `useState` or `useEffect`) in server-only code. It solely prevents build-time errors caused by static analysis when a module containing a hook reference is imported into a server context.
Fix: Ensure that any code calling actual React hooks is still executed in a client component, marked with `'use client'`, as per standard React and Next.js guidelines.

Install

npm install rehackt npm
yarn add rehackt yarn
pnpm add rehackt pnpm

Imports

useState
wrong:
```
const { useState } = require('rehackt');
```
correct:
```
import { useState } from 'rehackt';
```
Rehackt is an ESM-first library. Use named imports for individual hooks and other React exports.
useEffect
wrong:
```
import React from 'rehackt'; React.useEffect(...)
```
correct:
```
import { useEffect } from 'rehackt';
```
Import any React hook or utility you would normally get from 'react' directly from 'rehackt'. Rehackt re-exports everything from 'react'.
Fragment
wrong:
```
import { Fragment } from 'react';
```
correct:
```
import { Fragment } from 'rehackt';
```
While importing from 'react' is generally correct, using 'rehackt' ensures consistent behavior for libraries that need to hide client-side dependencies from the RSC compiler even for basic React exports.

Quickstart

Demonstrates replacing `import {useState} from "react"` with `import {useState} from "rehackt"` in a shared module to prevent React Server Components build errors when imported into a server-only context.

import { useState } from "rehackt";

export const data = {
  useForm: <T>(val: T) => {
      useState(val)
  },
  name: "server"
}

// This shared module can now be imported into a server-side file (e.g., a Next.js server action)
// without triggering a React Server Components error, even though it contains a client-side hook reference.
// For example, in 'action.ts':
// "use server"
// import { data } from './shared-code';
// export default async function someAction() {
//   return 'Hello ' + data.name;
// }

view raw JSON →