# react-19-plugin-migration

> Claude/Codex skill by [@grafana](https://omgskills.com/library/grafana/index.md) · 286 stars · Updated 2026-10-17

Migrate a Grafana plugin to React 19 compatibility. Use when the user asks to update a plugin for React 19, prepare for React 19, fix React 19 compatibility, upgrade to React 19, migrate to React 19, bump grafanaDependency to 12.3.0, externalize jsx-runtime, or run react-detect. Triggers on phrases like "update plugin for React 19", "React 19 migration", "prepare for React 19", "plugin React 19 compat", "grafanaDependency 12.3.0", "JSX runtime externals", "react-detect", "SECRET\_INTERNALS", "ReactCurrentOwner", or "ReactCurrentDispatcher".

## Install

```sh
git clone https://github.com/grafana/skills /tmp/skills && ln -s /tmp/skills/skills/grafana-plugins/react-19-plugin-migration ~/.claude/skills/react-19-plugin-migration
```

## From README

Migrate Grafana Plugin to React 19 Grafana 13 (April 2026) moves from React 18 to React 19. Incompatible plugins will break. Do not upgrade React to 19 — only make forward-compatible changes. All changes go in one PR. Execute steps in order. Never manually edit yarn.lock. --- Step 1: Detect plugin context If PLUGINID is empty, ask the user for the plugin root path. --- Step 2: Scan for compatibility issues Build the plugin and run the React 19 compatibility scanner: Save the output. It flags: jsxRuntimeImport / SECRETINTERNALS → Step 4 fixes this defaultProps / propTypes / ReactDOM.render → Step 8 (source fixes) findDOMNode → Step 6 (dependency bump) or Step 8 (source fix) If the build fails (plugin hasn't been built before), skip this step and run react-detect after Step 9 instead. If output says "No breaking changes detected", still proceed — jsx-runtime externalization and grafanaDependency bump are always required.

## Links

- HTML page: https://omgskills.com/library/grafana/skills/react-19-plugin-migration/
- GitHub: https://github.com/grafana/skills
- Author: [@grafana](https://omgskills.com/library/grafana/index.md)

## More from this repo

- [k6-docs](https://omgskills.com/library/grafana/skills/k6-docs/index.md) — Used to write or review k6 documentation across the three k6 repositories - k6-DefinitelyTyped (TypeScript types),...
   - [@grafana](https://omgskills.com/library/grafana/index.md) · 295 stars
- [adaptive-metrics](https://omgskills.com/library/grafana/skills/adaptive-metrics/index.md) — Cut Grafana Cloud Metrics cost by shrinking active-series count with Adaptive Metrics aggregation rules —...
   - [@grafana](https://omgskills.com/library/grafana/index.md) · 286 stars
- [admin](https://omgskills.com/library/grafana/skills/admin/index.md) — Used to manage Grafana Cloud accounts — organizations, stacks, RBAC roles and assignments, SSO/SAML/OAuth/GitHub auth,...
   - [@grafana](https://omgskills.com/library/grafana/index.md) · 286 stars