mirror of
https://github.com/johndoe6345789/snippet-pastebin.git
synced 2026-04-24 13:34:55 +00:00
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 <anonymous> (ReactPreview.tsx:68:32), <anonymous>: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
<TodoList>
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
<ReactPreview>
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
<SplitScreenEditor>
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 <TodoList> 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
<TodoList>
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
<ReactPreview>
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
<SplitScreenEditor>
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
This commit is contained in:
GitHub
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user