add @vitejs/plugin-react to transform JSX files before external-globals-plugin

Author: francisrupert

packages/dialtone-vue/.storybook/main.js

@@ -2,6 +2,7 @@
 import { createRequire } from 'node:module';
 import { dirname, join } from 'node:path';
 import { mergeConfig } from 'vite';
+import react from '@vitejs/plugin-react';
 
 const require = createRequire(import.meta.url);
 
@@ -28,6 +29,11 @@ const config = {
   async viteFinal (config) {
     // Merge custom configuration into the default config
     return mergeConfig(config, {
+      // @vitejs/plugin-react ensures .jsx files are transformed before
+      // Storybook's external-globals-plugin (which uses es-module-lexer
+      // and cannot parse JSX). Scoped to .jsx only to avoid conflicts
+      // with Vue's SFC compiler.
+      plugins: [react({ include: /\.jsx$/, jsxRuntime: 'classic' })],
       build: {
         sourcemap: true,
       },

packages/dialtone-vue/package.json

@@ -18,7 +18,6 @@
     "@dialpad/dialtone-icons": "workspace:*",
     "@dialpad/i18n": "1.25.0",
     "@tiptap/core": "3.19.0",
-    "@tiptap/static-renderer": "3.19.0",
     "@tiptap/extension-blockquote": "3.19.0",
     "@tiptap/extension-bold": "3.19.0",
     "@tiptap/extension-bubble-menu": "3.19.0",
@@ -47,6 +46,7 @@
     "@tiptap/extension-underline": "3.19.0",
     "@tiptap/extensions": "3.19",
     "@tiptap/pm": "3.19.0",
+    "@tiptap/static-renderer": "3.19.0",
     "@tiptap/suggestion": "3.19.0",
     "@tiptap/vue-3": "3.19.0",
     "date-fns": "4.1.0",
@@ -65,12 +65,13 @@
     "@storybook/addon-links": "10.3.0",
     "@storybook/test-runner": "^0.24.2",
     "@storybook/vue3-vite": "10.3.0",
+    "@vitejs/plugin-react": "6.0.1",
     "@vue/test-utils": "^2.4.0",
     "@vueless/storybook-dark-mode": "^10.0.7",
     "react": "19.2.4",
+    "react-dom": "19.2.4",
     "storybook": "10.3.0",
-    "vue": "^3.3.4",
-    "react-dom": "19.2.4"
+    "vue": "^3.3.4"
   },
   "peerDependencies": {
     "@dialpad/dialtone-css": "workspace:^",