Registry / web-framework / react-refresh-typescript

react-refresh-typescript

JSON →
library2.0.12jsnpmunverified

react-refresh-typescript is a TypeScript transformer that integrates React Fast Refresh (Hot Module Replacement) into React applications. It specifically handles the necessary transformations for TypeScript codebases to enable live editing of React components without losing their state. The package is currently under on-demand maintenance, meaning updates typically occur when issues are opened to track upstream changes in `react-refresh`. It currently matches `react-refresh@0.19.*` (React 19). Its primary audience includes bundler plugin developers, such as those building integrations for webpack, Rollup, or esbuild. Key differentiators include its direct integration as a TypeScript custom transformer, which allows it to operate early in the compilation pipeline, and its support for Deno environments. This package is essential for enabling a smooth developer experience with hot reloading in TypeScript-based React projects.

web-framework
npm install react-refresh-typescript
github ↗package ↗
INSTALL
IMPORT
SIG · REACT-REFRESH-TYPE
R
react-refresh-typescript
web-frameworkjavascriptv2.0.12
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

refresh
✓ import refresh from 'react-refresh-typescript';
✗ import { refresh } from 'react-refresh-typescript';
This package exports a default function. Named imports for the main transformer are incorrect.
Options
✓ import type { Options } from 'react-refresh-typescript';
Used for type hinting the configuration object for the transformer.
require('react-refresh-typescript')
✓ require('react-refresh-typescript')
CommonJS `require` for usage in bundler configurations like webpack's `ts-loader` options. The result is a function that should be called.

Demonstrates how to use react-refresh-typescript with TypeScript's `transpileModule` API to transform React JSX code for Fast Refresh.

import refresh from 'react-refresh-typescript'; import ts from 'typescript'; const sourceCode = ` const App = () => { const [count, setCount] = React.useState(0); return ( <div> <h1>Hello Fast Refresh!</h1> <p>Count: {count}</p> <button onClick={() => setCount(c => c + 1)}>Increment</button> </div> ); }; export default App; `; const { outputText } = ts.transpileModule(sourceCode, { compilerOptions: { target: ts.ScriptTarget.ESNext, jsx: ts.JsxEmit.Preserve, module: ts.ModuleKind.ESNext, // Required for Fast Refresh }, fileName: 'app.tsx', transformers: { before: [refresh()] }, }); console.log(outputText);
Debug
Known issues
breakingThis transformer does not work with TypeScript `module` option set to `CommonJS`. It requires `es2015` or later.
fix
Ensure your `tsconfig.json` `compilerOptions.module` is set to `es2015`, `esnext`, `es2020`, `es2022`, or `nodenext`.
affects: >=1.0.0
gotchaThe package is under 'on-demand maintenance', meaning updates to match the latest `react-refresh` runtime may not be immediate. It currently matches `react-refresh@0.19.*`.
fix
If you encounter issues with newer `react-refresh` versions, open an issue on the GitHub repository to prompt an update.
affects: >=1.0.0
gotchaWhen using `react-refresh-typescript` in Deno, you must provide a TypeScript instance either via an import map for 'typescript' or by passing `options.ts`.
fix
Configure an `import_map.json` in Deno to map `typescript` (e.g., to `https://esm.sh/typescript`) or import `dist-src/core.js` and provide `ts` in the options object directly.
affects: >=1.0.0
gotchaThe `refresh()` function should typically be called without arguments when used as a `ts-loader` custom transformer, but it accepts an `Options` object for custom configurations.
fix
Pass an `Options` object to `refresh()` if you need to customize `refreshReg`, `refreshSig`, `emitFullSignatures`, `ts` instance, or `hashSignature`.
affects: >=1.0.0
Errors
Common errors & fixes
Error: `module` must be `es2015` or later.
The TypeScript `module` compiler option is set to `CommonJS` or an older value that is not compatible with Fast Refresh transformation.
fix
Change `compilerOptions.module` in your `tsconfig.json` to `es2015` or a newer ES module target.
TypeError: (0 , react_refresh_typescript_1.refresh) is not a function
Attempting to use `react-refresh-typescript` with a named import when it provides a default export.
fix
Change your import statement from `import { refresh } from 'react-refresh-typescript';` to `import refresh from 'react-refresh-typescript';`
Upgrade
Version history
2.0.12latest on npm
Audit
Dependencies
react-refreshrequiredRuntime peer dependency for React Fast Refresh functionality.
typescriptrequiredCompiler peer dependency required for transformation.
Agent activity
2 hits · last 30 days
node
2
Resources
githubhttps://github.com/Jack-Works/react-refresh-transformer ↗
packagehttps://www.npmjs.com/package/react-refresh-typescript ↗
react-refresh-typescript — npm install react-refresh-typescript · libregistry