{"id":11929,"library":"rehype-react","title":"rehype-react","description":"rehype-react is a `rehype` plugin designed to compile HTML abstract syntax trees (hast) into JSX elements, enabling the rendering of HTML content within various JSX runtimes. It currently supports React, Preact, Solid, Svelte, and Vue. The current stable version is 8.0.0. The project maintains an active release cadence with frequent patch and minor updates, and major versions are released to introduce significant architectural changes, such as the move to ESM or multi-framework support. A key differentiator is its integration within the `unified` ecosystem, allowing developers to leverage a rich pipeline of AST transformations on HTML content before it's rendered. This provides more control compared to simpler solutions like `react-markdown` and offers an alternative to `react-remark` for HTML processing.","status":"active","version":"8.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/rehypejs/rehype-react","tags":["javascript","hast","html","plugin","preact","react","rehype","rehype-plugin","solid","typescript"],"install":[{"cmd":"npm install rehype-react","lang":"bash","label":"npm"},{"cmd":"yarn add rehype-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add rehype-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for the plugin architecture.","package":"unified","optional":false},{"reason":"Used to parse HTML strings into hast, which rehype-react then processes.","package":"rehype-parse","optional":false},{"reason":"Required as a peer dependency for rendering JSX elements in a React environment. Other JSX runtimes (Preact, Solid, Svelte, Vue) can be used instead.","package":"react","optional":false}],"imports":[{"note":"rehype-react is an ESM-only package since v7.0.0. CommonJS `require` statements will fail.","wrong":"const rehypeReact = require('rehype-react')","symbol":"rehypeReact","correct":"import rehypeReact from 'rehype-react'"},{"note":"Since v8.0.0, rehype-react expects a JSX runtime object (e.g., from `react/jsx-runtime` or equivalent) as its second argument, replacing the explicit `Fragment` and `createElement` imports used in previous versions.","wrong":"import {Fragment, createElement} from 'react'","symbol":"production (JSX runtime object)","correct":"import * as production from 'react/jsx-runtime'"},{"note":"The `unified` function is a named export from the `unified` package, not a default export.","wrong":"import unified from 'unified'","symbol":"unified","correct":"import { unified } from 'unified'"}],"quickstart":{"code":"import { Fragment, createElement, useEffect, useState } from 'react';\nimport * as prod from 'react/jsx-runtime';\nimport rehypeParse from 'rehype-parse';\nimport rehypeReact from 'rehype-react';\nimport { unified } from 'unified';\n\n// To run this example:\n// npm install react react-dom rehype-parse rehype-react unified\n\n// @ts-expect-error: The react types might be missing for `prod` object\nconst production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };\n\nconst htmlContent = `<h2>Hello, world from rehype-react!</h2>\\n<p>This paragraph contains <em>emphasized</em> text and a <a href=\"#\">link</a>.</p>\\n<p>Current Node.js version is ${process.version}.</p>`;\n\n/**\n * A React hook to process HTML content using rehype-react.\n * @param {string} text The HTML string to process.\n * @returns {JSX.Element} A React component tree.\n */\nfunction useHtmlProcessor(text) {\n  const [Content, setContent] = useState(createElement(Fragment));\n\n  useEffect(\n    function () {\n      (async function () {\n        const file = await unified()\n          .use(rehypeParse, { fragment: true })\n          .use(rehypeReact, production)\n          .process(text);\n\n        setContent(file.result);\n      })();\n    },\n    [text]\n  );\n\n  return Content;\n}\n\nexport default function App() {\n  return useHtmlProcessor(htmlContent);\n}\n\n// In a typical React app, you would render <App /> using ReactDOM.createRoot:\n// import ReactDOM from 'react-dom/client';\n// const root = ReactDOM.createRoot(document.getElementById('root'));\n// root.render(<App />);","lang":"typescript","description":"This quickstart demonstrates how to use `rehype-react` within a React component to transform an HTML string into a React element tree, supporting multiple JSX runtimes since v8.0.0."},"warnings":[{"fix":"Upgrade your Node.js environment to version 16 or newer. Use `nvm install 16` or `nvm use 16` if you use nvm.","message":"rehype-react v8.0.0 and later requires Node.js version 16 or higher. Older Node.js versions are not supported.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Migrate your project to use ESM (`import` statements) or ensure that your build system correctly transpiles ESM for CommonJS consumption. For Node.js, add `\"type\": \"module\"` to your `package.json`.","message":"rehype-react v7.0.0 and later is an ESM-only package. Attempting to `require()` it in a CommonJS module will result in a runtime error.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Change your `rehypeReact` usage from `.use(rehypeReact, {Fragment, createElement})` to `.use(rehypeReact, {Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs})` after importing `import * as prod from 'react/jsx-runtime'`.","message":"The `rehypeReact` plugin options for specifying `Fragment` and `createElement` have changed in v8.0.0. Instead of passing individual components, you must now pass an object containing the JSX runtime functions (e.g., `Fragment`, `jsx`, `jsxs`) from `react/jsx-runtime`.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Update your plugin options from `fixTableCellAlign: true` to `tableCellAlignToStyle: true`.","message":"The option `fixTableCellAlign` was renamed to `tableCellAlignToStyle` in v8.0.0.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Review your TypeScript code for type errors after upgrading and adjust types or cast as necessary, especially around the `file.result` type or custom component props.","message":"The types for rehype-react were significantly improved in v7.0.0. While this is generally beneficial, it could introduce breaking changes if your TypeScript code was relying on previously looser typings or internal structures.","severity":"breaking","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `const rehypeReact = require('rehype-react')` to `import rehypeReact from 'rehype-react'` and ensure your project is configured for ESM (e.g., by adding `\"type\": \"module\"` to `package.json`).","cause":"Attempting to import rehype-react using `require()` in a CommonJS module, but rehype-react is an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/rehype-react/index.js from ... not supported."},{"fix":"Instead of `{Fragment, createElement}`, pass an object containing the JSX runtime functions, usually imported as `import * as production from 'react/jsx-runtime'` and then `.use(rehypeReact, production)`.","cause":"This error typically occurs in v8.0.0 when passing individual `Fragment` and `createElement` imports to `rehypeReact` options, which is no longer supported.","error":"TypeError: Cannot read properties of undefined (reading 'Fragment')"},{"fix":"Rename the option `fixTableCellAlign` to `tableCellAlignToStyle` in your plugin configuration.","cause":"Using the deprecated option name `fixTableCellAlign` with rehype-react v8.0.0 or later.","error":"TypeError: `fixTableCellAlign` is not a valid option"},{"fix":"Ensure your build tools correctly polyfill Node.js globals for browser contexts, or conditionally access `process.version` only in Node.js environments. For example, use `typeof process !== 'undefined' ? process.version : 'browser'`.","cause":"Attempting to run a Node.js specific global (`process`) in a browser environment without proper polyfills or environment setup (e.g., Vite/Webpack configurations for browser).","error":"ReferenceError: process is not defined"}],"ecosystem":"npm"}