@memberjunction/react-test-harness 2.98.0 → 2.100.0

package/dist/lib/component-runner.d.ts

@@ -58,8 +58,9 @@ export declare class ComponentRunner {
     private loadComponentLibraries;
     /**
      * Set up error tracking in the page
+     * @deprecated Moved inline to page.evaluate after library loading to avoid false positives
      */
-    private setupErrorTracking;
+    private setupErrorTracking_DEPRECATED;
     /**
      * Collect runtime errors from the page
      */

package/dist/lib/component-runner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAMrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IAiuB7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;OAEG;YACW,kBAAkB;IA6PhC;;OAEG;YACW,oBAAoB;IAmHlC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YAyBb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CAuBtB"}
+{"version":3,"file":"component-runner.d.ts","sourceRoot":"","sources":["../../src/lib/component-runner.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAEnD,OAAO,KAAK,EAAiC,QAAQ,EAAyD,MAAM,sBAAsB,CAAC;AAC3I,OAAO,EAAmB,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAChE,OAAO,EACL,aAAa,EACb,kBAAkB,EAClB,aAAa,EAMd,MAAM,6CAA6C,CAAC;AAkCrD,MAAM,WAAW,yBAAyB;IACxC,aAAa,EAAE,aAAa,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,aAAa,CAAC;IAC/D,WAAW,EAAE,QAAQ,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,kBAAkB,CAAC;CAChC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,OAAO,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,SAAS,EAAE,CAAC;IACpB,QAAQ,EAAE,SAAS,EAAE,CAAC;IACtB,OAAO,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;CAC9B;AAED;;GAEG;AACH,qBAAa,eAAe;IAkBd,OAAO,CAAC,cAAc;IAhBlC,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,yBAAyB,CAS/C;IAKF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAS;gBAE7B,cAAc,EAAE,cAAc;IAElD;;OAEG;IACG,aAAa,CACjB,aAAa,EAAE,MAAM,EACrB,aAAa,EAAE,MAAM,EACrB,aAAa,CAAC,EAAE,GAAG,EACnB,eAAe,CAAC,EAAE,OAAO,EACzB,WAAW,CAAC,EAAE,QAAQ,EACtB,OAAO,CAAC,EAAE,GAAG,GACZ,OAAO,CAAC;QAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QAAC,SAAS,EAAE,OAAO,CAAA;KAAE,CAAC;IAmBrD,gBAAgB,CAAC,OAAO,EAAE,yBAAyB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IA28B7F;;;OAGG;YACW,oBAAoB;IA0ElC;;OAEG;YACW,sBAAsB;IAqHpC;;;OAGG;YACW,6BAA6B;IA6P3C;;OAEG;YACW,oBAAoB;IAmHlC;;OAEG;YACW,eAAe;IAkB7B;;OAEG;IACH,OAAO,CAAC,mBAAmB;YAyBb,qBAAqB;cAqBnB,uBAAuB,CAAC,WAAW,EAAE,QAAQ,GAAG,OAAO,CAAC,aAAa,CAAC;IA2JtF;;OAEG;YACW,iBAAiB;IAsT/B;;OAEG;IACH,OAAO,CAAC,aAAa;CAuBtB"}

package/dist/lib/component-runner.js

@@ -29,6 +29,27 @@ const component_linter_1 = require("./component-linter");
 const core_entities_1 = require("@memberjunction/core-entities");
 const ai_vectors_memory_1 = require("@memberjunction/ai-vectors-memory");
 const aiengine_1 = require("@memberjunction/aiengine");
+/**
+ * Pre-resolve a component spec for browser execution
+ * Converts registry components to embedded format with all code included
+ */
+async function preResolveComponentSpec(spec, contextUser) {
+    // If already embedded with code, return as-is
+    if (spec.location === 'embedded' && spec.code) {
+        return spec;
+    }
+    // For registry components, we need to fetch and embed everything
+    if (spec.location === 'registry' && spec.registry) {
+        // In test harness context, we likely don't have GraphQL access
+        // Registry components would need to be pre-resolved before being passed to test harness
+        console.warn(`Registry component ${spec.name} cannot be resolved in test harness context - GraphQL not available`);
+        console.warn('Registry components should be pre-resolved before passing to test harness');
+        // Return the spec as-is, which will likely fail in browser but at least won't crash here
+        return spec;
+    }
+    // For other types, return as-is
+    return spec;
+}
 /**
  * ComponentRunner that uses the actual React runtime via Playwright UMD bundle
  */
@@ -118,8 +139,8 @@ class ComponentRunner {
             if (!runtimeCheck.hasMJRuntime) {
                 throw new Error('Failed to inject MJReactRuntime into page context');
             }
-            // Set up error tracking
-            await this.setupErrorTracking(page, options.componentSpec, allLibraries);
+            // NOTE: Error tracking setup moved to after library loading to avoid false positives
+            // during library initialization (e.g., antd's UMD bundle setup)
             // Set up console logging
             this.setupConsoleLogging(page, consoleLogs, warnings);
             // Expose MJ utilities to the page
@@ -143,6 +164,14 @@ class ComponentRunner {
                 // Total available libraries in metadata (for context only)
                 console.log('  - total available libraries in metadata:', allLibraries?.length || 0);
             }
+            // // Pre-resolve the spec for browser execution (convert registry components to embedded)
+            // const resolvedSpec = await preResolveComponentSpec(options.componentSpec, options.contextUser);
+            // if (debug) {
+            //   console.log('📦 Pre-resolved spec for browser execution:', {
+            //     original: { location: options.componentSpec.location, registry: options.componentSpec.registry },
+            //     resolved: { location: resolvedSpec.location, registry: resolvedSpec.registry, hasCode: !!resolvedSpec.code }
+            //   });
+            // }
             // Execute the component using the real React runtime with timeout (Recommendation #1)
             const executionPromise = page.evaluate(async ({ spec, props, debug, componentLibraries }) => {
                 if (debug) {
@@ -157,7 +186,7 @@ class ComponentRunner {
                     if (!MJRuntime) {
                         throw new Error('React runtime not loaded');
                     }
-                    const { ComponentCompiler, ComponentRegistry, ComponentHierarchyRegistrar, SetupStyles } = MJRuntime;
+                    const { ComponentCompiler, ComponentRegistry, ComponentHierarchyRegistrar, ComponentManager, SetupStyles } = MJRuntime;
                     if (debug) {
                         console.log('🚀 Starting component execution with real runtime');
                         console.log('Available runtime classes:', Object.keys(MJRuntime));
@@ -181,6 +210,21 @@ class ComponentRunner {
                     // Create runtime context
                     // Note: Component libraries are loaded by the ComponentCompiler itself
                     // via loadRequiredLibraries, so we don't need to pass them here
+                    // Diagnostic: Check if React is available before creating context
+                    if (!window.React) {
+                        console.error('🔴 CRITICAL: React is NULL when creating runtimeContext!');
+                        console.error('Window keys:', Object.keys(window).filter(k => k.toLowerCase().includes('react')));
+                        throw new Error('React is not available in window context');
+                    }
+                    if (debug) {
+                        console.log('✅ React is available:', typeof window.React);
+                        console.log('✅ React hooks check:', {
+                            useState: typeof window.React?.useState,
+                            useEffect: typeof window.React?.useEffect,
+                            useRef: typeof window.React?.useRef,
+                            useMemo: typeof window.React?.useMemo
+                        });
+                    }
                     const runtimeContext = {
                         React: window.React,
                         ReactDOM: window.ReactDOM,
@@ -192,7 +236,14 @@ class ComponentRunner {
                     // IMPORTANT: Configure the LibraryRegistry in the browser context
                     // This is needed for the compiler to know about approved libraries
                     if (window.MJReactRuntime && window.MJReactRuntime.LibraryRegistry) {
-                        const { LibraryRegistry } = window.MJReactRuntime;
+                        const { LibraryRegistry, LibraryLoader } = window.MJReactRuntime;
+                        // Enable progressive delay for library initialization in test harness
+                        if (LibraryLoader) {
+                            LibraryLoader.enableProgressiveDelay = true;
+                            if (debug) {
+                                console.log('⚙️ Enabled progressive delay for library initialization');
+                            }
+                        }
                         // Configure the registry with the component libraries
                         // Note: LibraryRegistry.Config expects ComponentLibraryEntity[]
                         await LibraryRegistry.Config(false, componentLibraries || []);
@@ -201,7 +252,9 @@ class ComponentRunner {
                         }
                     }
                     const registry = new ComponentRegistry();
-                    const registrar = new ComponentHierarchyRegistrar(compiler, registry, runtimeContext);
+                    // NEW: Use ComponentManager instead of ComponentHierarchyRegistrar
+                    const manager = new ComponentManager(compiler, registry, runtimeContext, { debug: true, enableUsageTracking: false } // Force debug on for better diagnostics
+                    );
                     // Use the utilities we already created with mock metadata
                     // Don't call createRuntimeUtilities() as it tries to create new Metadata() which fails
                     const utilities = window.__mjUtilities;
@@ -249,13 +302,57 @@ class ComponentRunner {
                         }
                     }
                     let registrationResult;
+                    let loadResult; // Declare loadResult in outer scope
                     try {
-                        registrationResult = await registrar.registerHierarchy(spec, {
-                            styles,
-                            namespace: 'Global',
-                            version: 'v1', // Use v1 to match the registry defaults
-                            allLibraries: componentLibraries || [] // Pass the component libraries for LibraryRegistry
+                        if (debug) {
+                            console.log('📋 [BROWSER] Spec before loadHierarchy:', {
+                                name: spec.name,
+                                location: spec.location,
+                                registry: spec.registry,
+                                hasCode: !!spec.code,
+                                codeLength: spec.code?.length,
+                                libraries: spec.libraries,
+                                dependencies: spec.dependencies?.map((d) => ({
+                                    name: d.name,
+                                    location: d.location,
+                                    hasCode: !!d.code
+                                }))
+                            });
+                        }
+                        // NEW: Use ComponentManager.loadHierarchy instead of registrar.registerHierarchy
+                        // Note: In browser context, we don't have access to contextUser or database
+                        // This is fine for embedded components which are self-contained
+                        loadResult = await manager.loadHierarchy(spec, {
+                            contextUser: undefined, // No user context in browser
+                            defaultNamespace: 'Global',
+                            defaultVersion: 'v1',
+                            returnType: 'both',
+                            resolutionMode: 'embed', // Convert to embedded format for browser execution
+                            allLibraries: componentLibraries || [] // Pass libraries for compiler
                         });
+                        if (debug) {
+                            console.log('📋 [BROWSER] LoadHierarchy result:', {
+                                success: loadResult.success,
+                                rootComponent: !!loadResult.rootComponent,
+                                resolvedSpec: loadResult.resolvedSpec ? {
+                                    name: loadResult.resolvedSpec.name,
+                                    location: loadResult.resolvedSpec.location,
+                                    registry: loadResult.resolvedSpec.registry,
+                                    libraries: loadResult.resolvedSpec.libraries,
+                                    hasCode: !!loadResult.resolvedSpec.code
+                                } : null,
+                                loadedComponents: loadResult.loadedComponents,
+                                errors: loadResult.errors
+                            });
+                        }
+                        // Convert to old format for compatibility
+                        registrationResult = {
+                            success: loadResult.success,
+                            registeredComponents: loadResult.loadedComponents,
+                            errors: loadResult.errors.map((e) => ({ componentName: e.componentName || '', error: e.message, phase: e.phase })),
+                            warnings: [],
+                            resolvedSpec: loadResult.resolvedSpec
+                        };
                     }
                     catch (registrationError) {
                         // Capture the actual error before it gets obscured
@@ -288,32 +385,140 @@ class ComponentRunner {
                         // Note: ComponentRegistry doesn't expose internal components Map directly
                         // We can see what was registered through the registrationResult
                     }
-                    // Get the root component object - explicitly pass namespace and version
-                    const RootComponentObject = registry.get(spec.name, 'Global', 'v1');
+                    // NEW: With ComponentManager, we already have the components from loadResult
+                    if (!loadResult) {
+                        throw new Error('Component loading failed - no result returned');
+                    }
+                    const RootComponentObject = loadResult.rootComponent;
                     if (!RootComponentObject) {
                         // Enhanced error message with debugging info
-                        console.error('Failed to find component:', spec.name);
-                        console.error('Registry keys:', Array.from(registry.components.keys()));
-                        throw new Error('Root component not found: ' + spec.name);
+                        console.error('Failed to load component:', spec.name);
+                        console.error('Load errors:', loadResult.errors);
+                        throw new Error('Root component not loaded: ' + spec.name);
                     }
                     // Extract the React component from the ComponentObject
                     const RootComponent = RootComponentObject.component;
                     if (!RootComponent || typeof RootComponent !== 'function') {
                         throw new Error('Component object does not contain a valid React component');
                     }
-                    // Get all registered component objects and extract React components
-                    const componentObjects = registry.getAll('Global', 'v1');
-                    const components = {};
-                    for (const [name, componentObj] of Object.entries(componentObjects)) {
-                        // ComponentObject has a component property that's the React component
-                        components[name] = componentObj.component;
-                    }
+                    // Get all loaded components from the result
+                    // ComponentManager now returns unwrapped components directly
+                    const components = loadResult.components || {};
                     if (debug) {
                         console.log('📚 Registered components for dependencies:', Object.keys(components));
                         console.log('📋 Component spec dependencies:', spec.dependencies?.map((d) => d.name) || []);
+                        // Check what libraries are actually available in global scope
+                        console.log('🌍 [BROWSER] Global library check after loading:', {
+                            ApexCharts: typeof window.ApexCharts,
+                            antd: typeof window.antd,
+                            React: typeof window.React,
+                            ReactDOM: typeof window.ReactDOM,
+                            windowKeys: Object.keys(window).filter(k => k.toLowerCase().includes('apex') ||
+                                k.toLowerCase().includes('antd') ||
+                                k === 'ApexCharts' ||
+                                k === 'antd')
+                        });
+                        // If libraries were supposed to be loaded, check their actual presence
+                        if (spec.libraries && spec.libraries.length > 0) {
+                            console.log('🔍 [BROWSER] Checking required libraries:');
+                            for (const lib of spec.libraries) {
+                                const globalVar = lib.globalVariable;
+                                const exists = !!window[globalVar];
+                                const type = typeof window[globalVar];
+                                console.log(`  - ${lib.name} (${globalVar}): ${exists ? `✅ Present (${type})` : '❌ Missing'}`);
+                            }
+                        }
                     }
                     // Note: Library components are now handled by the runtime's compiler
                     // which loads them into the appropriate context/closure
+                    // NOW set up enhanced error tracking - AFTER libraries are loaded
+                    // This avoids false positives from library initialization code (e.g., antd)
+                    if (!window.__testHarnessErrorTrackingSetup) {
+                        window.__testHarnessErrorTrackingSetup = true;
+                        // Initialize error tracking arrays if not already done
+                        window.__testHarnessRuntimeErrors = window.__testHarnessRuntimeErrors || [];
+                        window.__testHarnessConsoleErrors = window.__testHarnessConsoleErrors || [];
+                        window.__testHarnessConsoleWarnings = window.__testHarnessConsoleWarnings || [];
+                        window.__testHarnessTestFailed = window.__testHarnessTestFailed || false;
+                        window.__testHarnessRenderCount = window.__testHarnessRenderCount || 0;
+                        // Wrap React.createElement to detect invalid element types
+                        const originalCreateElement = window.React?.createElement;
+                        if (originalCreateElement) {
+                            window.React.createElement = function (type, props, ...children) {
+                                window.__testHarnessRenderCount++;
+                                // Enhanced error detection for invalid element types
+                                if (type !== null && type !== undefined) {
+                                    const typeOf = typeof type;
+                                    // Check for the common "object instead of component" error
+                                    if (typeOf === 'object' && !window.React.isValidElement(type)) {
+                                        // Try to get a meaningful name for the object
+                                        let objectInfo = 'unknown object';
+                                        try {
+                                            if (type.constructor && type.constructor.name) {
+                                                objectInfo = type.constructor.name;
+                                            }
+                                            else if (type.name) {
+                                                objectInfo = type.name;
+                                            }
+                                            else {
+                                                // Try to show what properties it has
+                                                const keys = Object.keys(type).slice(0, 5);
+                                                if (keys.length > 0) {
+                                                    objectInfo = `object with properties: ${keys.join(', ')}`;
+                                                }
+                                            }
+                                        }
+                                        catch (e) {
+                                            // Ignore errors in trying to get object info
+                                        }
+                                        // Generate helpful error message
+                                        const errorMsg = [
+                                            `Invalid JSX element type: React received an object (${objectInfo}) instead of a React component function.`,
+                                            '',
+                                            'This often occurs when JSX elements or React.createElement receive an object instead of a valid component function.',
+                                            '',
+                                            'Inspect all instances where you are using JSX elements that come from libraries or components to ensure they are properly referenced.',
+                                            '',
+                                            'The exact fix depends on the specific library or component structure.'
+                                        ].join('\\n');
+                                        // Log to both console and error tracking
+                                        console.error('🔴 Invalid JSX Element Type Detected:', errorMsg);
+                                        // Store the error for later collection
+                                        window.__testHarnessRuntimeErrors.push({
+                                            message: errorMsg,
+                                            type: 'invalid-element-type',
+                                            phase: 'createElement',
+                                            source: 'enhanced-detection',
+                                            elementInfo: objectInfo
+                                        });
+                                        // Still try to call the original to get React's error too
+                                        // This will provide the component stack trace
+                                    }
+                                }
+                                else if (type === undefined) {
+                                    // Undefined component - likely a failed destructure or missing import
+                                    const errorMsg = [
+                                        'Invalid JSX element type: component is undefined.',
+                                        '',
+                                        'This occurs when a JSX element references a component that is undefined at runtime.',
+                                        '',
+                                        'Inspect how this component is being accessed - it may not exist in the expected location or may have a different name.',
+                                        '',
+                                        'Check that the component exists in your dependencies or libraries and is properly referenced.'
+                                    ].join('\\n');
+                                    console.error('🔴 Undefined JSX Component:', errorMsg);
+                                    window.__testHarnessRuntimeErrors.push({
+                                        message: errorMsg,
+                                        type: 'undefined-component',
+                                        phase: 'createElement',
+                                        source: 'enhanced-detection'
+                                    });
+                                }
+                                // Call original createElement
+                                return originalCreateElement.apply(this, [type, props, ...children]);
+                            };
+                        }
+                    }
                     // Render the component
                     const rootElement = document.getElementById('root');
                     if (!rootElement) {
@@ -495,7 +700,15 @@ class ComponentRunner {
             renderCount = await page.evaluate(() => window.__testHarnessRenderCount || 0);
             // Collect all errors with source information
             const runtimeErrorsWithSource = await this.collectRuntimeErrors(page);
-            errors.push(...runtimeErrorsWithSource.map(e => e.message)); // Extract messages for backward compat
+            // Filter out JSX element type errors when adding to errors array
+            errors.push(...runtimeErrorsWithSource
+                .filter(e => {
+                // Skip JSX element type errors from error count
+                const isJSXError = e.type === 'invalid-element-type' ||
+                    e.type === 'undefined-component';
+                return !isJSXError;
+            })
+                .map(e => e.message)); // Extract messages for backward compat
             // Collect warnings (separate from errors)
             const collectedWarnings = await this.collectWarnings(page);
             warnings.push(...collectedWarnings);
@@ -503,12 +716,18 @@ class ComponentRunner {
             const asyncWaitTime = options.asyncErrorWaitTime || 1000;
             await page.waitForTimeout(asyncWaitTime);
             const asyncErrors = await this.collectRuntimeErrors(page);
-            // Only add new errors
+            // Only add new errors (excluding JSX element type errors)
             asyncErrors.forEach(err => {
-                if (!errors.includes(err.message)) {
+                const isJSXError = err.type === 'invalid-element-type' ||
+                    err.type === 'undefined-component';
+                if (!isJSXError && !errors.includes(err.message)) {
                     errors.push(err.message);
                     runtimeErrorsWithSource.push(err); // Keep the structured version too
                 }
+                else if (isJSXError && !runtimeErrorsWithSource.some(e => e.message === err.message)) {
+                    // Still track JSX errors for logging but don't add to errors array
+                    runtimeErrorsWithSource.push(err);
+                }
             });
             // Also check for new warnings
             const asyncWarnings = await this.collectWarnings(page);
@@ -534,7 +753,20 @@ class ComponentRunner {
             // Combine runtime errors with data errors
             const allErrors = [...errors, ...dataErrors];
             // Map runtime errors with source info and specific rules
-            const errorViolations = runtimeErrorsWithSource.map(e => ({
+            // Filter out JSX element type errors - they're too noisy and often false positives
+            const errorViolations = runtimeErrorsWithSource
+                .filter(e => {
+                // Skip JSX element type errors - still logged but not reported as violations
+                const isJSXError = e.rule === 'invalid-jsx-element' ||
+                    e.rule === 'undefined-jsx-component' ||
+                    e.type === 'invalid-element-type' ||
+                    e.type === 'undefined-component';
+                if (isJSXError && debug) {
+                    console.log('📝 JSX element error detected but not reported as violation:', e.message);
+                }
+                return !isJSXError;
+            })
+                .map(e => ({
                 message: e.message,
                 severity: 'critical',
                 rule: e.rule || 'runtime-error', // Use specific rule from collectRuntimeErrors
@@ -852,8 +1084,9 @@ class ComponentRunner {
     }
     /**
      * Set up error tracking in the page
+     * @deprecated Moved inline to page.evaluate after library loading to avoid false positives
      */
-    async setupErrorTracking(page, componentSpec, allLibraries) {
+    async setupErrorTracking_DEPRECATED(page, componentSpec, allLibraries) {
         await page.evaluate(({ spec, availableLibraries }) => {
             // Initialize error tracking
             window.__testHarnessRuntimeErrors = [];