skills.rest
1k-off
1k-offCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-19-plugin-migration

Migrate Grafana plugins to React 19 compatibility with dependency and build updates.

1|Updated May 21, 2026
Search Tags:#compatibility#grafana#react 19#dependency upgrades#plugin migration#webpack externals#react-detect
One-click install
npx skills add https://github.com/1k-off/umbraco-observability-playground --skill react-19-plugin-migration-1k-off
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-19-plugin-migration
Source: https://github.com/1k-off/umbraco-observability-playground/tree/main/.agents/skills/react-19-plugin-migration
Command: npx skills add https://github.com/1k-off/umbraco-observability-playground --skill react-19-plugin-migration-1k-off

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Grafana 13 switches from React 18 to React 19, and incompatible plugins can break at runtime; this skill helps you update the plugin to remain forward-compatible without upgrading React yourself.

Core Features & Use Cases

  • Detect React 19 compatibility issues using a build plus the @grafana/react-detect scanner, then prioritize fixes based on what it reports.
  • Apply Grafana plugin tooling updates by running the @grafana/create-plugin update to get the required bundler, mocks, and React 19 support changes.
  • Implement required React 19 compatibility changes including externalizing react/jsx-runtime, bumping grafanaDependency to at least 12.3.0, and addressing common source-level deprecations (e.g., ReactDOM.render, defaultProps, propTypes patterns).
  • Handle known migration failures with targeted workarounds for common issues such as ReactCurrentOwner/Dispatcher crashes from @grafana-cloud/*, i18n initialization errors for @grafana/scenes, and react/jsx-runtime runtime 404s.

Quick Start

Ask: "Prepare my Grafana plugin in the repository for React 19 compatibility by following the migration steps in the react-19-plugin-migration skill."

Frequently Asked Questions about react-19-plugin-migration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate my Grafana plugin to be compatible with React 19?▼

To migrate a Grafana plugin for React 19 compatibility, externalize the react/jsx-runtime, bump grafanaDependency to at least 12.3.0, and run @grafana/create-plugin updates for required bundler and scaffolding changes.

Why does my Grafana plugin break at runtime after upgrading to Grafana 13?▼

Grafana plugin runtime breakage occurs because Grafana 13 switches from React 18 to React 19, requiring source-level deprecations like ReactDOM.render and defaultProps to be fixed and react/jsx-runtime to be externalized.

How do I detect React 19 compatibility issues in my Grafana plugin?▼

Detect React 19 compatibility issues in your Grafana plugin by running a build alongside the @grafana/react-detect scanner, then prioritize fixes based on the reported deprecations and runtime errors.

How do I fix react/jsx-runtime 404 errors during Grafana plugin migration?▼

Fix react/jsx-runtime 404 runtime errors during Grafana plugin migration by applying webpack externals configurations to externalize react/jsx-runtime and updating your bundler via @grafana/create-plugin.

Do I need to upgrade React myself to prepare my Grafana plugin for Grafana 13?▼

You do not need to upgrade React yourself for Grafana 13 compatibility; instead, update your plugin tooling, externalize react/jsx-runtime, and bump grafanaDependency to 12.3.0 to remain forward-compatible.

How do I resolve ReactCurrentOwner crashes from @grafana-cloud packages after a React 19 migration?▼

Resolve ReactCurrentOwner and Dispatcher crashes from @grafana-cloud packages during a React 19 migration by applying targeted workarounds for known dependency failures and updating your plugin scaffolding.

Related Skills

Explore More Software Engineering Skills→
grafanagrafana
213

react-19-plugin-migration

Detect and resolve React 19 compatibility issues in Grafana plugins.

Official
Advanced
chadolmin01chadolmin01

vercel-composition-patterns

Convertescriptor JVM-based middleware for scalable, resilient microservices.

Community
Advanced
kevinxo328kevinxo328
5

vercel-composition-patterns

Apply React composition patterns to reduce boolean props and build scalable component libraries.

Community
Intermediate
wilfriedagowilfriedago
2

next-upgrade

Upgrade Next.js projects by analyzing package.json and applying official codemods.

Community
Intermediate