diff --git a/app/api/artifact/route.ts b/app/api/artifact/route.ts
index 4accf7c09a0..f647f26b254 100644
--- a/app/api/artifact/route.ts
+++ b/app/api/artifact/route.ts
@@ -4,7 +4,7 @@ import { getServerSideConfig } from "@/app/config/server";
 
 async function handle(req: NextRequest, res: NextResponse) {
   const serverConfig = getServerSideConfig();
-  const storeUrl = (key) =>
+  const storeUrl = (key: string) =>
     `https://api.cloudflare.com/client/v4/accounts/${serverConfig.cloudflareAccountId}/storage/kv/namespaces/${serverConfig.cloudflareKVNamespaceId}/values/${key}`;
   const storeHeaders = () => ({
     Authorization: `Bearer ${serverConfig.cloudflareKVApiKey}`,
@@ -32,7 +32,7 @@ async function handle(req: NextRequest, res: NextResponse) {
   }
   if (req.method === "GET") {
     const id = req?.nextUrl?.searchParams?.get("id");
-    const res = await fetch(storeUrl(id), {
+    const res = await fetch(storeUrl(id as string), {
       headers: storeHeaders(),
       method: "GET",
     });
diff --git a/app/components/artifact.tsx b/app/components/artifact.tsx
index dfcd450646c..24e62dfb1a8 100644
--- a/app/components/artifact.tsx
+++ b/app/components/artifact.tsx
@@ -67,23 +67,34 @@ export function HTMLPreview(props: {
       style={{ width: "100%", height }}
       // src={`data:text/html,${encodeURIComponent(srcDoc)}`}
       srcDoc={srcDoc}
-      onLoad={(e) => props?.onLoad(title)}
+      onLoad={(e) => props?.onLoad && props?.onLoad(title)}
     ></iframe>
   );
 }
 
-export function ArtifactShareButton({ getCode, id, style, fileName }) {
+export function ArtifactShareButton({
+  getCode,
+  id,
+  style,
+  fileName,
+}: {
+  getCode: () => string;
+  id?: string;
+  style?: any;
+  fileName?: string;
+}) {
   const [name, setName] = useState(id);
   const [show, setShow] = useState(false);
-  const shareUrl = useMemo(() =>
-    [location.origin, "#", Path.Artifact, "/", name].join(""),
+  const shareUrl = useMemo(
+    () => [location.origin, "#", Path.Artifact, "/", name].join(""),
+    [name],
   );
-  const upload = (code) =>
+  const upload = (code: string) =>
     id
       ? Promise.resolve({ id })
       : fetch(ApiPath.Artifact, {
           method: "POST",
-          body: getCode(),
+          body: code,
         })
           .then((res) => res.json())
           .then(({ id }) => {
@@ -103,9 +114,11 @@ export function ArtifactShareButton({ getCode, id, style, fileName }) {
           bordered
           title={Locale.Export.Artifact.Title}
           onClick={() => {
-            upload(getCode()).then(({ id }) => {
-              setShow(true);
-              setName(id);
+            upload(getCode()).then((res) => {
+              if (res?.id) {
+                setShow(true);
+                setName(res?.id);
+              }
             });
           }}
         />
@@ -168,7 +181,7 @@ export function Artifact() {
   return (
     <div
       style={{
-        disply: "block",
+        display: "block",
         width: "100%",
         height: "100%",
         position: "relative",
@@ -195,7 +208,7 @@ export function Artifact() {
           autoHeight={false}
           height={height - 36}
           onLoad={(title) => {
-            setFileName(title);
+            setFileName(title as string);
             setLoading(false);
           }}
         />
diff --git a/app/components/home.tsx b/app/components/home.tsx
index 11000f98533..4874480449f 100644
--- a/app/components/home.tsx
+++ b/app/components/home.tsx
@@ -143,7 +143,7 @@ function Screen() {
   if (isArtifact) {
     return (
       <Routes>
-        <Route exact path="/artifact/:id" element={<Artifact />} />
+        <Route path="/artifact/:id" element={<Artifact />} />
       </Routes>
     );
   }