skills.rest
grafana
grafanaOFFICIAL
Explore all skills by this author →
Website𝕏@grafanaGitHub

react-19-plugin-migration

Detect and resolve React 19 compatibility issues in Grafana plugins.

213|18|Updated Mar 17, 2026
Search Tags:#eslint#grafana#react-19#plugin-migration#jsx-runtime#create-plugin#grafanaDependency
One-click install
npx skills add https://github.com/grafana/skills --skill react-19-plugin-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-19-plugin-migration
Source: https://github.com/grafana/skills/tree/main/skills/grafana-plugins/react-19-plugin-migration
Command: npx skills add https://github.com/grafana/skills --skill react-19-plugin-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Migrate Grafana plugins to be forward-compatible with React 19 and prevent runtime crashes, build failures, and bundled jsx-runtime conflicts that occur when plugins or their dependencies bundle React 18 internals.

Core Features & Use Cases

  • Compatibility scanning and verification: Run build and react-detect to identify jsx-runtime imports, SECRET_INTERNALS access, defaultProps/propTypes usage, and other breaking patterns.
  • Automated scaffolding and dependency updates: Update create-plugin scaffolding, externalize react/jsx-runtime, bump grafanaDependency to >=12.3.0, and align @grafana/* and Faro packages.
  • ESLint and source fixes plus CI validation: Migrate to ESLint v9 flat config, apply source code changes (createRoot, remove propTypes, adjust defaultProps), update CI, and re-run build/typecheck/tests to validate success.
  • Use case: A plugin maintainer preparing a plugin for Grafana 13 can follow the checklist to avoid runtime ReactCurrentOwner crashes and ensure the plugin runs with Grafana's React 19 runtime.

Quick Start

Run the migration checklist on a clean branch: update create-plugin scaffolding, add externalize-jsx-runtime, bump grafanaDependency to >=12.3.0, update relevant @grafana and faro packages, complete ESLint 9 migration, rebuild, and re-run react-detect to confirm no issues.

Frequently Asked Questions about react-19-plugin-migration

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

FAQPage Schema
Why does my Grafana plugin crash with ReactCurrentOwner errors after upgrading?▼

ReactCurrentOwner crashes occur when plugins bundle React 18 internals instead of externalizing react/jsx-runtime. Migrating to React 19 compatibility requires updating create-plugin scaffolding and externalizing jsx-runtime to prevent bundled runtime conflicts.

How do I migrate my Grafana plugin to React 19?▼

To migrate a Grafana plugin to React 19, update create-plugin scaffolding, externalize react/jsx-runtime, bump grafanaDependency to >=12.3.0, upgrade @grafana/* and Faro packages, and migrate ESLint to flat config. Validate success by re-running build, typecheck, and test steps.

What breaking changes do I need to fix for React 19 plugin compatibility?▼

React 19 plugin compatibility requires fixing jsx-runtime imports, SECRET_INTERNALS access, and defaultProps/propTypes usage. Source code changes include migrating to createRoot, removing propTypes, and adjusting defaultProps to align with the new React runtime.

Do I need to update grafanaDependency for React 19 plugin migration?▼

Yes, React 19 plugin migration requires bumping grafanaDependency to >=12.3.0. This version bump ensures the plugin targets a Grafana runtime that supports React 19 and prevents forward-compatibility build failures.

How do I migrate ESLint to flat config for Grafana plugins?▼

Migrating ESLint to flat config for Grafana plugins involves upgrading to ESLint v9 and applying the flat configuration format. This migration is part of the React 19 update checklist to ensure linting aligns with the new create-plugin scaffolding.

Can I use react-detect to verify Grafana plugin React 19 compatibility?▼

Yes, react-detect scans Grafana plugins to identify jsx-runtime imports, SECRET_INTERNALS access, and breaking patterns. Running react-detect after scaffolding updates verifies that all React 19 compatibility issues are resolved before validating with builds.

Related Skills

Explore More Software Engineering Skills→
1k-off1k-off
1

react-19-plugin-migration

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

Community
Advanced
h-4vokh-4vok

repo-validate

Run lint, typecheck, test, smoke, and build checks across a repository and emit a pass/fail report.

Community
Intermediate
nodnarbnitramnodnarbnitram
15

grafana-plugin-scaffolding

Scaffold Grafana plugin projects with the official create-plugin tool.

Community
Advanced
anchildress1anchildress1
65

eslint-plugin-configs

Generate ESLint plugin scaffolds with rule configs for v8 and v9.

Community
Intermediate