From 951defa65d08d679ef99cdda692a414ef90a5619 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Wed, 23 Jul 2025 10:05:57 +0200
Subject: [PATCH 1/2] feat(create-plugin): update configs for react jsx
 automatic

---
 packages/create-plugin/templates/common/.config/_eslintrc   | 2 +-
 .../create-plugin/templates/common/.config/jest.config.js   | 5 +++++
 .../templates/common/.config/rspack/rspack.config.ts        | 2 ++
 .../create-plugin/templates/common/.config/tsconfig.json    | 3 ++-
 .../templates/common/.config/webpack/webpack.config.ts      | 6 ++++++
 5 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/create-plugin/templates/common/.config/_eslintrc b/packages/create-plugin/templates/common/.config/_eslintrc
index eed6ea6682..4a02742c27 100644
--- a/packages/create-plugin/templates/common/.config/_eslintrc
+++ b/packages/create-plugin/templates/common/.config/_eslintrc
@@ -5,7 +5,7 @@
  * https://grafana.com/developers/plugin-tools/how-to-guides/extend-configurations#extend-the-eslint-config
  */
 {
-  "extends": ["@grafana/eslint-config"],
+  "extends": ["@grafana/eslint-config", "plugin:react/jsx-runtime"],
   "root": true,
   "rules": {
     "react/prop-types": "off"
diff --git a/packages/create-plugin/templates/common/.config/jest.config.js b/packages/create-plugin/templates/common/.config/jest.config.js
index efe1938452..d7ecca4b51 100644
--- a/packages/create-plugin/templates/common/.config/jest.config.js
+++ b/packages/create-plugin/templates/common/.config/jest.config.js
@@ -33,6 +33,11 @@ module.exports = {
             decorators: false,
             dynamicImport: true,
           },
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
         },
       },
     ],
diff --git a/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts b/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts
index 25771831af..4d2db6efda 100644
--- a/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts
+++ b/packages/create-plugin/templates/common/.config/rspack/rspack.config.ts
@@ -54,6 +54,7 @@ const config = async (env): Promise<Configuration> => {
       'slate-plain-serializer',
       '@grafana/slate-react',
       'react',
+      'react/jsx-runtime',
       'react-dom',
       'react-redux',
       'redux',
@@ -120,6 +121,7 @@ const config = async (env): Promise<Configuration> => {
                   react: {
                     development: !env.production,
                     refresh: false,
+                    runtime: 'automatic',
                   },
                 },
                 target: 'es2022',
diff --git a/packages/create-plugin/templates/common/.config/tsconfig.json b/packages/create-plugin/templates/common/.config/tsconfig.json
index c0fc6d47c9..44b90284f8 100644
--- a/packages/create-plugin/templates/common/.config/tsconfig.json
+++ b/packages/create-plugin/templates/common/.config/tsconfig.json
@@ -11,7 +11,8 @@
     "rootDir": "../src",
     "baseUrl": "../src",
     "typeRoots": ["../node_modules/@types"],
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "jsx": "react-jsx"
   },
   "ts-node": {
     "compilerOptions": {
diff --git a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
index 1804cb393e..263f9c9e63 100644
--- a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
+++ b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
@@ -69,6 +69,7 @@ const config = async (env: Env): Promise<Configuration> => {
       'slate-plain-serializer',
       '@grafana/slate-react',
       'react',
+      'react/jsx-runtime',
       'react-dom',
       'react-redux',
       'redux',
@@ -134,6 +135,11 @@ const config = async (env: Env): Promise<Configuration> => {
                   decorators: false,
                   dynamicImport: true,
                 },
+                transform: {
+                  react: {
+                    runtime: 'automatic',
+                  },
+                },
               },
             },
           },

From 5311bf80e5763ad5de37f6e994802d3821faa99e Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Fri, 5 Sep 2025 11:07:10 +0200
Subject: [PATCH 2/2] feat(create-plugin): externalise react/jsx-dev-runtime to
 prevent issues appearing only in prod

---
 .../templates/common/.config/webpack/webpack.config.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
index 263f9c9e63..d85d77f644 100644
--- a/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
+++ b/packages/create-plugin/templates/common/.config/webpack/webpack.config.ts
@@ -70,6 +70,7 @@ const config = async (env: Env): Promise<Configuration> => {
       '@grafana/slate-react',
       'react',
       'react/jsx-runtime',
+      'react/jsx-dev-runtime',
       'react-dom',
       'react-redux',
       'redux',