{"id":11927,"library":"rehackt","title":"Rehackt: React Server Components Hook Hider","description":"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.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/phryneas/rehackt","tags":["javascript","typescript"],"install":[{"cmd":"npm install rehackt","lang":"bash","label":"npm"},{"cmd":"yarn add rehackt","lang":"bash","label":"yarn"},{"cmd":"pnpm add rehackt","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, as rehackt acts as a wrapper/proxy for React's exports.","package":"react","optional":false},{"reason":"Peer dependency for TypeScript type definitions compatible with React.","package":"@types/react","optional":true}],"imports":[{"note":"Rehackt is an ESM-first library. Use named imports for individual hooks and other React exports.","wrong":"const { useState } = require('rehackt');","symbol":"useState","correct":"import { useState } from 'rehackt';"},{"note":"Import any React hook or utility you would normally get from 'react' directly from 'rehackt'. Rehackt re-exports everything from 'react'.","wrong":"import React from 'rehackt'; React.useEffect(...)","symbol":"useEffect","correct":"import { useEffect } from 'rehackt';"},{"note":"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.","wrong":"import { Fragment } from 'react';","symbol":"Fragment","correct":"import { Fragment } from 'rehackt';"}],"quickstart":{"code":"import { useState } from \"rehackt\";\n\nexport const data = {\n  useForm: <T>(val: T) => {\n      useState(val)\n  },\n  name: \"server\"\n}\n\n// This shared module can now be imported into a server-side file (e.g., a Next.js server action)\n// without triggering a React Server Components error, even though it contains a client-side hook reference.\n// For example, in 'action.ts':\n// \"use server\"\n// import { data } from './shared-code';\n// export default async function someAction() {\n//   return 'Hello ' + data.name;\n// }","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"},{"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.","message":"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.","severity":"breaking","affected_versions":"<0.1.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=0.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Replace the import of client-side React hooks (e.g., `import { useState } from \"react\";`) with `import { useState } from \"rehackt\";` in the shared module.","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.","error":"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."}],"ecosystem":"npm"}