From f09bf7fd6034fccfa199581d71f3f5090ea610cd Mon Sep 17 00:00:00 2001 From: kleap-admin Date: Thu, 15 Jan 2026 13:42:09 +0000 Subject: [PATCH] Update components/kleap-scripts.tsx --- components/kleap-scripts.tsx | 44 ++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 components/kleap-scripts.tsx diff --git a/components/kleap-scripts.tsx b/components/kleap-scripts.tsx new file mode 100644 index 0000000..4eef593 --- /dev/null +++ b/components/kleap-scripts.tsx @@ -0,0 +1,44 @@ +'use client' + +import { useEffect } from 'react' +import { KleapBadge } from './kleap-badge' +import { KleapAnalytics } from './kleap-analytics' + +/** + * Kleap Scripts Loader + * + * NOTE: Tailwind CDN is now loaded in layout.tsx SSR (not here!) + * This ensures it's available BEFORE React renders, fixing JIT class generation + */ +export function KleapScripts() { + useEffect(() => { + // Only load Kleap scripts when inside an iframe (Kleap environment) + if (typeof window !== 'undefined' && window.parent !== window) { + // Create script tags dynamically + const scripts = [ + '/_kleap/kleap-shim.js', + '/_kleap/kleap-nextjs-error-detector.js', // Next.js build error detection + '/_kleap/kleap-component-selector-client.js', + '/_kleap/kleap-react-tagger.js' + ]; + + scripts.forEach(src => { + // Check if script is already loaded + if (!document.querySelector(`script[src="${src}"]`)) { + const script = document.createElement('script'); + script.src = src; + script.defer = true; + script.onerror = () => console.warn('Kleap script not found:', src); + document.head.appendChild(script); + } + }); + } + }, []); + + return ( + <> + + + + ); +}