From cbdf366c7f29b205861cff461c8de66381b1e41e Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Sat, 17 Jan 2026 17:45:23 +0000 Subject: [PATCH] Generated by Spark: I tried a example, seems app is not wired up correctly. Live preview loaded duration 5665.10ms VM29890:28 Uncaught ReferenceError: Card is not defined at TodoList (eval at (ReactPreview.tsx:68:32), :28:43) at Object.react_stack_bottom_frame (react-dom_client.js?v=19d5d69b:18509:20) at renderWithHooks (react-dom_client.js?v=19d5d69b:5654:24) at updateFunctionComponent (react-dom_client.js?v=19d5d69b:7475:21) at beginWork (react-dom_client.js?v=19d5d69b:8525:20) at runWithFiberInDEV (react-dom_client.js?v=19d5d69b:997:72) at performUnitOfWork (react-dom_client.js?v=19d5d69b:12561:98) at workLoopSync (react-dom_client.js?v=19d5d69b:12424:43) at renderRootSync (react-dom_client.js?v=19d5d69b:12408:13) at performWorkOnRoot (react-dom_client.js?v=19d5d69b:11827:37) at performSyncWorkOnRoot (react-dom_client.js?v=19d5d69b:13517:9) at flushSyncWorkAcrossRoots_impl (react-dom_client.js?v=19d5d69b:13414:122) at flushSyncWork$1 (react-dom_client.js?v=19d5d69b:12076:86) at Object.f (react-dom_client.js?v=19d5d69b:19794:77) at exports.flushSync (chunk-ZLLQK76H.js?v=19d5d69b:92:106) at dispatchDiscreteCustomEvent (chunk-XZFLHFSN.js?v=19d5d69b:238:24) at handleSelect (@radix-ui_react-dropdown-menu.js?v=19d5d69b:518:9) at handleEvent (chunk-XZFLHFSN.js?v=19d5d69b:23:31) at executeDispatch (react-dom_client.js?v=19d5d69b:13622:11) at runWithFiberInDEV (react-dom_client.js?v=19d5d69b:997:72) at processDispatchQueue (react-dom_client.js?v=19d5d69b:13658:37) at react-dom_client.js?v=19d5d69b:14071:11 at batchedUpdates$1 (react-dom_client.js?v=19d5d69b:2626:42) at dispatchEventForPluginEventSystem (react-dom_client.js?v=19d5d69b:13763:9) at dispatchEvent (react-dom_client.js?v=19d5d69b:16784:13) at dispatchDiscreteEvent (react-dom_client.js?v=19d5d69b:16765:62) TodoList @ VM29890:28 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11827 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 ReactPreview @ ReactPreview.tsx:203 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11827 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 SplitScreenEditor @ SplitScreenEditor.tsx:164 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11766 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 SnippetDialog @ SnippetDialog.tsx:530 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11766 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765Understand this error ReactPreview.tsx:203 An error occurred in the component. Consider adding an error boundary to your tree to customize error handling behavior. Visit https://react.dev/link/error-boundaries to learn more about error boundaries. defaultOnUncaughtError @ react-dom_client.js?v=19d5d69b:6966 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 ReactPreview @ ReactPreview.tsx:203 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11827 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 SplitScreenEditor @ SplitScreenEditor.tsx:164 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11766 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765 exports.jsxDEV @ react_jsx-dev-runtime.js?v=19d5d69b:247 SnippetDialog @ SnippetDialog.tsx:530 react_stack_bottom_frame @ react-dom_client.js?v=19d5d69b:18509 renderWithHooks @ react-dom_client.js?v=19d5d69b:5654 updateFunctionComponent @ react-dom_client.js?v=19d5d69b:7475 beginWork @ react-dom_client.js?v=19d5d69b:8525 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 performUnitOfWork @ react-dom_client.js?v=19d5d69b:12561 workLoopSync @ react-dom_client.js?v=19d5d69b:12424 renderRootSync @ react-dom_client.js?v=19d5d69b:12408 performWorkOnRoot @ react-dom_client.js?v=19d5d69b:11766 performSyncWorkOnRoot @ react-dom_client.js?v=19d5d69b:13517 flushSyncWorkAcrossRoots_impl @ react-dom_client.js?v=19d5d69b:13414 flushSyncWork$1 @ react-dom_client.js?v=19d5d69b:12076 f @ react-dom_client.js?v=19d5d69b:19794 exports.flushSync @ chunk-ZLLQK76H.js?v=19d5d69b:92 dispatchDiscreteCustomEvent @ chunk-XZFLHFSN.js?v=19d5d69b:238 handleSelect @ @radix-ui_react-dropdown-menu.js?v=19d5d69b:518 handleEvent @ chunk-XZFLHFSN.js?v=19d5d69b:23 executeDispatch @ react-dom_client.js?v=19d5d69b:13622 runWithFiberInDEV @ react-dom_client.js?v=19d5d69b:997 processDispatchQueue @ react-dom_client.js?v=19d5d69b:13658 (anonymous) @ react-dom_client.js?v=19d5d69b:14071 batchedUpdates$1 @ react-dom_client.js?v=19d5d69b:2626 dispatchEventForPluginEventSystem @ react-dom_client.js?v=19d5d69b:13763 dispatchEvent @ react-dom_client.js?v=19d5d69b:16784 dispatchDiscreteEvent @ react-dom_client.js?v=19d5d69b:16765Understand this warning heartbeat.ts:124 Uncaught (in promise) TypeError: Failed to construct 'URL': Invalid URL at heartbeat.ts:124:17 --- src/components/ReactPreview.tsx | 105 +++++++++++++++++++++++++++++++- 1 file changed, 104 insertions(+), 1 deletion(-) diff --git a/src/components/ReactPreview.tsx b/src/components/ReactPreview.tsx index 2539b65..9375071 100644 --- a/src/components/ReactPreview.tsx +++ b/src/components/ReactPreview.tsx @@ -6,6 +6,24 @@ import { AIErrorHelper } from '@/components/AIErrorHelper' import { WarningCircle } from '@phosphor-icons/react' import { InputParameter } from '@/lib/types' import * as Babel from '@babel/standalone' +import { Button } from '@/components/ui/button' +import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card' +import { Input } from '@/components/ui/input' +import { Label } from '@/components/ui/label' +import { Textarea } from '@/components/ui/textarea' +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' +import { Checkbox } from '@/components/ui/checkbox' +import { Switch } from '@/components/ui/switch' +import { Badge } from '@/components/ui/badge' +import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs' +import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog' +import { Separator } from '@/components/ui/separator' +import { Progress } from '@/components/ui/progress' +import { Slider } from '@/components/ui/slider' +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar' +import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion' +import { toast } from 'sonner' +import * as PhosphorIcons from '@phosphor-icons/react' interface ReactPreviewProps { code: string @@ -56,6 +74,48 @@ export function ReactPreview({ code, language, functionName, inputParameters }: (function() { const React = arguments[0]; const { useState, useEffect, useRef, useMemo, useCallback, useReducer, useContext } = React; + const Button = arguments[1]; + const Card = arguments[2]; + const CardContent = arguments[3]; + const CardDescription = arguments[4]; + const CardFooter = arguments[5]; + const CardHeader = arguments[6]; + const CardTitle = arguments[7]; + const Input = arguments[8]; + const Label = arguments[9]; + const Textarea = arguments[10]; + const Select = arguments[11]; + const SelectContent = arguments[12]; + const SelectItem = arguments[13]; + const SelectTrigger = arguments[14]; + const SelectValue = arguments[15]; + const Checkbox = arguments[16]; + const Switch = arguments[17]; + const Badge = arguments[18]; + const Tabs = arguments[19]; + const TabsContent = arguments[20]; + const TabsList = arguments[21]; + const TabsTrigger = arguments[22]; + const Dialog = arguments[23]; + const DialogContent = arguments[24]; + const DialogDescription = arguments[25]; + const DialogFooter = arguments[26]; + const DialogHeader = arguments[27]; + const DialogTitle = arguments[28]; + const DialogTrigger = arguments[29]; + const Separator = arguments[30]; + const Progress = arguments[31]; + const Slider = arguments[32]; + const Avatar = arguments[33]; + const AvatarFallback = arguments[34]; + const AvatarImage = arguments[35]; + const Accordion = arguments[36]; + const AccordionContent = arguments[37]; + const AccordionItem = arguments[38]; + const AccordionTrigger = arguments[39]; + const toast = arguments[40]; + const PhosphorIcons = arguments[41]; + const { Plus, Minus, ArrowCounterClockwise, PaperPlaneRight, Trash, User, Gear, Bell, MagnifyingGlass } = PhosphorIcons; ${transformedCode} @@ -66,7 +126,50 @@ export function ReactPreview({ code, language, functionName, inputParameters }: ` const componentFactory = eval(wrappedCode) - const CreatedComponent = componentFactory(React) + const CreatedComponent = componentFactory( + React, + Button, + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, + Input, + Label, + Textarea, + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, + Checkbox, + Switch, + Badge, + Tabs, + TabsContent, + TabsList, + TabsTrigger, + Dialog, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, + Separator, + Progress, + Slider, + Avatar, + AvatarFallback, + AvatarImage, + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, + toast, + PhosphorIcons + ) if (typeof CreatedComponent === 'function') { setComponent(() => CreatedComponent)