React Version Support
Which React and Next.js versions work with Replay's React features, and how to set up production sourcemaps for React 18.3.
Replay has two separate sets of React features:
- The React DevTools panel in the Replay DevTools UI lets you inspect the component tree, props, state, and hooks at any point in time. It uses sourcemaps to display original component names, but doesn't depend on specific React version support.
- The React analysis layer, used by Replay MCP tools and operator pods, provides deeper instrumentation — render tracking, performance profiling, effect analysis, and render cause tracing. This layer works by instrumenting specific functions inside React's source code, which means it needs to be able to read React's original (non-minified) function names. The version compatibility and sourcemap setup on this page apply to these analysis features.
Supported Versions
| Framework / Library | React Analysis | Setup Required |
|---|---|---|
| React 19 | Supported | None |
| React 18.3 | Supported | Requires @acemarke/react-prod-sourcemaps plugin (see below) |
| Next.js 15+ | Supported | None — Next 15 and 16 use React 19 canaries, which are detected automatically |
| Next.js 14 | Not currently supported | Uses React 18 canaries that the analysis layer doesn't instrument yet |
| React 17 and older | Not supported | — |
Why React 18.3 Needs Extra Setup
React 19 ships production artifacts that aren't minified — build tools minify them during your app's build step, and standard sourcemaps preserve the original function names. Replay can instrument these directly.
React 18 and earlier shipped pre-minified production builds with no sourcemaps. All function names are single characters, making it impossible for Replay to find the specific internal functions it needs to instrument.
The @acemarke/react-prod-sourcemaps package solves this by providing pre-built sourcemaps for React's production artifacts. It includes a build plugin that detects React in your app's bundle and replaces the minified source with the original, named source via sourcemap remapping.
Setting Up React 18.3 Production Sourcemaps
Install
Terminal
Configure Your Build Tool
The plugin is built on unplugin and supports Webpack, Vite, Rollup, esbuild, and Rspack.
If your build tool isn't configured to generate sourcemaps, the plugin will
silently fail. Use mode: "strict" to make the plugin throw an error if no
sourcemaps are generated.
import { WebpackReactSourcemapsPlugin } from '@acemarke/react-prod-sourcemaps'
module.exports = {
devtool: 'source-map',
plugins: [WebpackReactSourcemapsPlugin({ mode: 'strict' })],
}
Plugin Options
| Option | Type | Default | Description |
|---|---|---|---|
mode | "strict" | undefined | Throws an error if no sourcemap files are generated by the build tool |
debug | boolean | false | Enables debug logging |
preserve | boolean | false | Keeps original sourcemaps and writes remapped ones to [name].js.remapped.map |
CLI Usage
If you prefer to remap sourcemaps as a post-build step instead of using the build plugin:
Terminal
The output file will be written to sourcemap.remapped.js.map.
Version Matching
The sourcemaps package matches React artifacts by content hash, not by semver range. Only exact version matches will work.
The package currently includes sourcemaps for these React versions:
- React 18.3.1
- React 18.2.0
- React 18.1.0
- React 17.0.2
If you're using a different version (for example, a hypothetical 18.3.2 security patch), the plugin won't find a matching hash and the sourcemaps won't be applied. The supported version list is updated manually — check the package repository for the latest supported versions.