fix: exclude react/jsx-runtime from bundle and add smoke test

.github/workflows/test.yml

@@ -26,3 +26,5 @@ jobs:
       - run: npx biome check
 
       - run: npx playwright install && npm run test
+
+      - run: npm run build && node scripts/smoke-test-dist.mjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-compare-image",
-  "version": "3.5.16",
+  "version": "3.5.17",
   "description": "React component to compare two images using slider.",
   "main": "./dist/ReactCompareImage.umd.js",
   "module": "./dist/ReactCompareImage.mjs",

scripts/smoke-test-dist.mjs

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+import { readFileSync } from 'node:fs'
+
+// This test ensures no unnecessary dependencies are bundled into the built output
+// like `react/jsx-runtime` or `react/jsx-dev-runtime`.
+// https://github.com/tam315/react-compare-image/issues/153
+
+const DIST_FILE = 'dist/ReactCompareImage.mjs'
+
+let content
+try {
+  content = readFileSync(DIST_FILE, 'utf-8')
+} catch {
+  console.error(`ERROR: ${DIST_FILE} not found. Run "npm run build" first.`)
+  process.exit(1)
+}
+
+const FORBIDDEN = ['react.transitional.element', 'react.element']
+
+for (const symbol of FORBIDDEN) {
+  if (content.includes(symbol)) {
+    console.error(`FAIL: "${symbol}" found in ${DIST_FILE}`)
+    process.exit(1)
+  }
+}
+
+console.log(`PASS: No forbidden React symbol strings found in ${DIST_FILE}`)

vite.config.mts

@@ -19,7 +19,7 @@ export default defineConfig({
       fileName: 'ReactCompareImage',
     },
     rollupOptions: {
-      external: ['react', 'react-dom'],
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
       output: {
         globals: {
           react: 'React',