feat: update artifact component #1007

Toddyclipsgg · 2025-01-05T19:19:26Z

Honestly, I don't know how to program, but I managed to fix this error below with GIT CLONE and I'm contributing to help the project's development. Who knows, maybe I'll learn from these excellent people.

Preview of the error in the video: https://www.youtube.com/watch?v=zgg0FpxraBk

Toddyclipsgg · 2025-01-05T20:12:03Z

@wonderwhy-er @thecodacus @mrsimpson Take a look to see if everything is ok!

thecodacus · 2025-01-05T20:31:53Z

app/components/chat/Artifact.tsx

  const actions = useStore(
-    computed(artifact.runner.actions, (actions) => {
+    computed(artifact?.runner?.actions ?? [], (actions) => {
      return Object.values(actions);
    }),


i think you can remove this check

// Early return if no artifact exists if (!artifact) { return null; }

since you are already null checking in line 42

and add a block before the return statement, otherwise react will not like it when the hooks are being called inconsistently

// Early return if no artifact exists if (!artifact) { return <></>; }

I'll try here, I don't know anything about programming hahaha

Removing this part itself generates several problems, what do you think I should do?

// Early return if no artifact exists
if (!artifact) {
return null;
}

I have made the changes see if this works

I tested it and it gave me the error below, that's what I'm talking about, the way I did it works perfectly but when I modify or remove it, another error is generated.

TypeError: Cannot convert undefined or null to object
at Object.values ()
at http://localhost:5174/app/components/chat/Artifact.tsx:36:19
at set (http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:312:19)
at http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (http://localhost:5174/node_modules/.vite/deps/chunk-SSLESP6V.js?v=50f5e49b:77:15)

This is the console error:

4 Artifact.tsx:38 Uncaught TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15)
(anônimo) @ Artifact.tsx:38
set @ chunk-SSLESP6V.js?v=50f5e49b:312
(anônimo) @ chunk-SSLESP6V.js?v=50f5e49b:332
listener @ chunk-SSLESP6V.js?v=50f5e49b:264
object.events..reduceRight.shared @ chunk-SSLESP6V.js?v=50f5e49b:174
(anônimo) @ chunk-SSLESP6V.js?v=50f5e49b:174
$store.listen @ chunk-SSLESP6V.js?v=50f5e49b:272
get @ chunk-SSLESP6V.js?v=50f5e49b:77
mountSyncExternalStore @ chunk-RMBP4JJR.js?v=50f5e49b:18764
useSyncExternalStore @ chunk-RMBP4JJR.js?v=50f5e49b:19451
useSyncExternalStore @ chunk-MMYKBDYJ.js?v=50f5e49b:1405
useStore @ @nanostores_react.js?v=50f5e49b:32
(anônimo) @ Artifact.tsx:36
renderWithHooks @ chunk-RMBP4JJR.js?v=50f5e49b:18426
updateFunctionComponent @ chunk-RMBP4JJR.js?v=50f5e49b:21460
updateSimpleMemoComponent @ chunk-RMBP4JJR.js?v=50f5e49b:21341
updateMemoComponent @ chunk-RMBP4JJR.js?v=50f5e49b:21244
beginWork @ chunk-RMBP4JJR.js?v=50f5e49b:22855
callCallback2 @ chunk-RMBP4JJR.js?v=50f5e49b:10552
invokeGuardedCallbackDev @ chunk-RMBP4JJR.js?v=50f5e49b:10577
invokeGuardedCallback @ chunk-RMBP4JJR.js?v=50f5e49b:10611
beginWork$1 @ chunk-RMBP4JJR.js?v=50f5e49b:26643
performUnitOfWork @ chunk-RMBP4JJR.js?v=50f5e49b:26076
workLoopSync @ chunk-RMBP4JJR.js?v=50f5e49b:26015
renderRootSync @ chunk-RMBP4JJR.js?v=50f5e49b:25994
recoverFromConcurrentError @ chunk-RMBP4JJR.js?v=50f5e49b:25614
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25562
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-SCWIOAUD.js?v=50f5e49b:2942 TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15)
RemixRootDefaultErrorBoundary @ chunk-SCWIOAUD.js?v=50f5e49b:2942
renderWithHooks @ chunk-RMBP4JJR.js?v=50f5e49b:18426
mountIndeterminateComponent @ chunk-RMBP4JJR.js?v=50f5e49b:21804
beginWork @ chunk-RMBP4JJR.js?v=50f5e49b:22792
beginWork$1 @ chunk-RMBP4JJR.js?v=50f5e49b:26631
performUnitOfWork @ chunk-RMBP4JJR.js?v=50f5e49b:26076
workLoopSync @ chunk-RMBP4JJR.js?v=50f5e49b:26015
renderRootSync @ chunk-RMBP4JJR.js?v=50f5e49b:25994
recoverFromConcurrentError @ chunk-RMBP4JJR.js?v=50f5e49b:25614
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25562
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-RMBP4JJR.js?v=50f5e49b:20910 The above error occurred in one of your React components:

at http://localhost:5174/app/components/chat/Artifact.tsx:27:3 at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at Markdown (http://localhost:5174/node_modules/.vite/deps/react-markdown.js?v=50f5e49b:5840:35) at http://localhost:5174/app/components/chat/Markdown.tsx:18:3 at div at _c (http://localhost:5174/app/components/chat/AssistantMessage.tsx:11:3) at div at div at div at http://localhost:5174/app/components/chat/Messages.client.tsx:21:5 at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at div at div at div at Provider (http://localhost:5174/node_modules/.vite/deps/chunk-6KZQL2HW.js?v=50f5e49b:86:15) at TooltipProvider (http://localhost:5174/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=50f5e49b:98:5) at http://localhost:5174/app/components/chat/BaseChat.tsx:36:3 at http://localhost:5174/app/components/chat/Chat.client.tsx:138:16 at Chat (http://localhost:5174/app/components/chat/Chat.client.tsx:43:7) at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at Index at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at Outlet (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:781:26) at Layout (http://localhost:5174/app/root.tsx:99:3) at App (http://localhost:5174/app/root.tsx:129:17) at Layout (http://localhost:5174/app/root.tsx:99:3) at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at RenderErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:373:5) at DataRoutes (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1435:5) at Router (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:788:15) at RouterProvider (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1249:5) at RemixErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:2904:5) at RemixBrowser (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ chunk-RMBP4JJR.js?v=50f5e49b:20910
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20956
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-SCWIOAUD.js?v=50f5e49b:400 React Router caught the following error during render TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15) {componentStack: '\n at http://localhost:5174/app/components/chat/…/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)'}
componentDidCatch @ chunk-SCWIOAUD.js?v=50f5e49b:400
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20962
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-RMBP4JJR.js?v=50f5e49b:20910 The above error occurred in one of your React components:

at http://localhost:5174/app/components/chat/Artifact.tsx:27:3 at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at Markdown (http://localhost:5174/node_modules/.vite/deps/react-markdown.js?v=50f5e49b:5840:35) at http://localhost:5174/app/components/chat/Markdown.tsx:18:3 at div at _c (http://localhost:5174/app/components/chat/AssistantMessage.tsx:11:3) at div at div at div at http://localhost:5174/app/components/chat/Messages.client.tsx:21:5 at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at div at div at div at Provider (http://localhost:5174/node_modules/.vite/deps/chunk-6KZQL2HW.js?v=50f5e49b:86:15) at TooltipProvider (http://localhost:5174/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=50f5e49b:98:5) at http://localhost:5174/app/components/chat/BaseChat.tsx:36:3 at http://localhost:5174/app/components/chat/Chat.client.tsx:138:16 at Chat (http://localhost:5174/app/components/chat/Chat.client.tsx:43:7) at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at Index at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at Outlet (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:781:26) at Layout (http://localhost:5174/app/root.tsx:99:3) at App (http://localhost:5174/app/root.tsx:129:17) at Layout (http://localhost:5174/app/root.tsx:99:3) at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at RenderErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:373:5) at DataRoutes (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1435:5) at Router (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:788:15) at RouterProvider (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1249:5) at RemixErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:2904:5) at RemixBrowser (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ chunk-RMBP4JJR.js?v=50f5e49b:20910
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20956
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-SCWIOAUD.js?v=50f5e49b:400 React Router caught the following error during render TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15) {componentStack: '\n at http://localhost:5174/app/components/chat/…/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)'}
componentDidCatch @ chunk-SCWIOAUD.js?v=50f5e49b:400
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20962
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-RMBP4JJR.js?v=50f5e49b:20910 The above error occurred in one of your React components:

at http://localhost:5174/app/components/chat/Artifact.tsx:27:3 at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at Markdown (http://localhost:5174/node_modules/.vite/deps/react-markdown.js?v=50f5e49b:5840:35) at http://localhost:5174/app/components/chat/Markdown.tsx:18:3 at div at _c (http://localhost:5174/app/components/chat/AssistantMessage.tsx:11:3) at div at div at div at http://localhost:5174/app/components/chat/Messages.client.tsx:21:5 at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at div at div at div at Provider (http://localhost:5174/node_modules/.vite/deps/chunk-6KZQL2HW.js?v=50f5e49b:86:15) at TooltipProvider (http://localhost:5174/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=50f5e49b:98:5) at http://localhost:5174/app/components/chat/BaseChat.tsx:36:3 at http://localhost:5174/app/components/chat/Chat.client.tsx:138:16 at Chat (http://localhost:5174/app/components/chat/Chat.client.tsx:43:7) at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at Index at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at Outlet (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:781:26) at Layout (http://localhost:5174/app/root.tsx:99:3) at App (http://localhost:5174/app/root.tsx:129:17) at Layout (http://localhost:5174/app/root.tsx:99:3) at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at RenderErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:373:5) at DataRoutes (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1435:5) at Router (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:788:15) at RouterProvider (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1249:5) at RemixErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:2904:5) at RemixBrowser (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ chunk-RMBP4JJR.js?v=50f5e49b:20910
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20956
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-SCWIOAUD.js?v=50f5e49b:400 React Router caught the following error during render TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15) {componentStack: '\n at http://localhost:5174/app/components/chat/…/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)'}
componentDidCatch @ chunk-SCWIOAUD.js?v=50f5e49b:400
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20962
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-RMBP4JJR.js?v=50f5e49b:20910 The above error occurred in one of your React components:

at http://localhost:5174/app/components/chat/Artifact.tsx:27:3 at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at li at ul at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at div at div (http://localhost:5174/app/components/chat/Markdown.tsx:27:9) at Markdown (http://localhost:5174/node_modules/.vite/deps/react-markdown.js?v=50f5e49b:5840:35) at http://localhost:5174/app/components/chat/Markdown.tsx:18:3 at div at _c (http://localhost:5174/app/components/chat/AssistantMessage.tsx:11:3) at div at div at div at http://localhost:5174/app/components/chat/Messages.client.tsx:21:5 at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at div at div at div at Provider (http://localhost:5174/node_modules/.vite/deps/chunk-6KZQL2HW.js?v=50f5e49b:86:15) at TooltipProvider (http://localhost:5174/node_modules/.vite/deps/@radix-ui_react-tooltip.js?v=50f5e49b:98:5) at http://localhost:5174/app/components/chat/BaseChat.tsx:36:3 at http://localhost:5174/app/components/chat/Chat.client.tsx:138:16 at Chat (http://localhost:5174/app/components/chat/Chat.client.tsx:43:7) at ClientOnly (http://localhost:5174/node_modules/.vite/deps/remix-utils_client-only.js?v=50f5e49b:38:23) at div at Index at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at Outlet (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:781:26) at Layout (http://localhost:5174/app/root.tsx:99:3) at App (http://localhost:5174/app/root.tsx:129:17) at Layout (http://localhost:5174/app/root.tsx:99:3) at RenderedRoute (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:413:5) at RenderErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:373:5) at DataRoutes (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1435:5) at Router (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:788:15) at RouterProvider (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:1249:5) at RemixErrorBoundary (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:2904:5) at RemixBrowser (http://localhost:5174/node_modules/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ chunk-RMBP4JJR.js?v=50f5e49b:20910
callback @ chunk-RMBP4JJR.js?v=50f5e49b:20956
callCallback @ chunk-RMBP4JJR.js?v=50f5e49b:18126
commitUpdateQueue @ chunk-RMBP4JJR.js?v=50f5e49b:18143
commitLayoutEffectOnFiber @ chunk-RMBP4JJR.js?v=50f5e49b:23953
commitLayoutMountEffects_complete @ chunk-RMBP4JJR.js?v=50f5e49b:24858
commitLayoutEffects_begin @ chunk-RMBP4JJR.js?v=50f5e49b:24847
commitLayoutEffects @ chunk-RMBP4JJR.js?v=50f5e49b:24798
commitRootImpl @ chunk-RMBP4JJR.js?v=50f5e49b:26231
commitRoot @ chunk-RMBP4JJR.js?v=50f5e49b:26155
finishConcurrentRender @ chunk-RMBP4JJR.js?v=50f5e49b:25638
performConcurrentWorkOnRoot @ chunk-RMBP4JJR.js?v=50f5e49b:25596
workLoop @ chunk-RMBP4JJR.js?v=50f5e49b:462
flushWork @ chunk-RMBP4JJR.js?v=50f5e49b:441
performWorkUntilDeadline @ chunk-RMBP4JJR.js?v=50f5e49b:649Entenda o erroAI
chunk-SCWIOAUD.js?v=50f5e49b:400 React Router caught the following error during render TypeError: Cannot convert undefined or null to object
at Object.values ()
at Artifact.tsx:38:21
at set (chunk-SSLESP6V.js?v=50f5e49b:312:19)
at chunk-SSLESP6V.js?v=50f5e49b:332:5
at listener (chunk-SSLESP6V.js?v=50f5e49b:264:19)
at object.events..reduceRight.shared (chunk-SSLESP6V.js?v=50f5e49b:174:58)
at Array.reduceRight ()
at chunk-SSLESP6V.js?v=50f5e49b:174:31
at $store.listen (chunk-SSLESP6V.js?v=50f5e49b:272:9)
at Object.get (chunk-SSLESP6V.js?v=50f5e49b:77:15) {componentStack: '\n at http://localhost:5174/app/components/chat/…/.vite/deps/chunk-SCWIOAUD.js?v=50f5e49b:4458:46)'}

got it, can you try one more time

Toddyclipsgg · 2025-01-05T23:13:07Z

If you tell me that you are betting, I can help you try to solve the problem better, even though I don't know anything, I am very hard-working and persistent in solving problems until I solve them correctly. If you give me some tips, I would also like to learn more about programming. Thanks @thecodacus!

thecodacus · 2025-01-06T06:30:06Z

the error that you pasted suggested the Object.values is throwing error as actions object is not present.
so I have added a check to only use Object.values if actions is present and return a empty list otherwise.

I am not able to replicate the issue from my side, so I am relying on you to test the changes. can you check the last change ?

Toddyclipsgg · 2025-01-06T07:43:24Z

Yes, I can do it, but it will have to be tomorrow after work here it's already 5 o'clock in the morning.

wonderwhy-er · 2025-01-06T09:01:08Z

I actually got this error today when importing a github repo
I can replicate it here
https://bolt.myaibuilt.app/git?url=https://github.com/wonderwhy-er/bolt.myaibuilt.app_hosted-Bolt.New-oTToDev

After git import it shows bolt ui with empty messages and then crashes

thecodacus · 2025-01-06T09:36:16Z

@wonderwhy-er this is breaking cuz the url is not a .git url and the content has boltArtifact tags in it
maybe we can add a check where it will see if the url is a git url or not

Toddyclipsgg · 2025-01-06T10:04:17Z

The problem happens regardless of whether there is .git in the link.

thecodacus · 2025-01-06T10:21:29Z

you cannot import bolt.diy in bolt.diy. it wont work as of now

thecodacus · 2025-01-06T11:59:26Z

@Toddyclipsgg @wonderwhy-er, raised a PR for importing bolt in bolt #1020

Toddyclipsgg · 2025-01-06T21:27:27Z

I wasn't trying to import bolt into bolt, it was just an example, the error happened with any repository link.

Toddyclipsgg · 2025-01-06T21:28:12Z

And what can I help you with? @thecodacus

thecodacus · 2025-01-07T15:24:22Z

I wasn't trying to import bolt into bolt, it was just an example, the error happened with any repository link.

in the video you shared you copied wrong link.

the repo link has to be git repo link not github page link
check the below image below

if you still face any issue share the repo you are trying to import that is causing the issue, I will investigate

Toddyclipsgg · 2025-01-07T19:30:52Z

You are very good man, it was perfect for me. Can I close this PR? @thecodacus

feat: update artifact component

70ae5e9

thecodacus reviewed Jan 5, 2025

View reviewed changes

thecodacus added 2 commits January 6, 2025 03:09

Update Artifact.tsx

9526d8e

Update Artifact.tsx

289b990

Toddyclipsgg mentioned this pull request Jan 8, 2025

fix: git import issue when importing bolt on bolt #1020

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: update artifact component #1007

feat: update artifact component #1007

Toddyclipsgg commented Jan 5, 2025 •

edited

Loading

Toddyclipsgg commented Jan 5, 2025 •

edited

Loading

thecodacus Jan 5, 2025

Toddyclipsgg Jan 5, 2025

thecodacus Jan 5, 2025

Toddyclipsgg Jan 5, 2025

Toddyclipsgg Jan 5, 2025

thecodacus Jan 5, 2025

Toddyclipsgg Jan 5, 2025

Toddyclipsgg Jan 5, 2025

thecodacus Jan 5, 2025

Toddyclipsgg commented Jan 5, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

wonderwhy-er commented Jan 6, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

thecodacus commented Jan 6, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

thecodacus commented Jan 7, 2025 •

edited

Loading

Toddyclipsgg commented Jan 7, 2025 •

edited

Loading

feat: update artifact component #1007

Are you sure you want to change the base?

feat: update artifact component #1007

Conversation

Toddyclipsgg commented Jan 5, 2025 • edited Loading

Toddyclipsgg commented Jan 5, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Toddyclipsgg commented Jan 5, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

wonderwhy-er commented Jan 6, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

thecodacus commented Jan 6, 2025

thecodacus commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

Toddyclipsgg commented Jan 6, 2025

thecodacus commented Jan 7, 2025 • edited Loading

Toddyclipsgg commented Jan 7, 2025 • edited Loading

Toddyclipsgg commented Jan 5, 2025 •

edited

Loading

Toddyclipsgg commented Jan 5, 2025 •

edited

Loading

thecodacus commented Jan 7, 2025 •

edited

Loading

Toddyclipsgg commented Jan 7, 2025 •

edited

Loading