fix: Recover from failed render in SSR

Author: bfanger

src/lib/sveltify.ts

@@ -66,61 +66,71 @@ export default function sveltify<P>(
           return `<ssr-portal${current.length - 1}/>`;
         }
         current = [];
-        const contexts = getAllContexts();
-        const html = $$render.call(Slot, result, {}, bindings, slots, context);
-        const leaf = !slots.default && current.length === 0;
+        try {
+          const contexts = getAllContexts();
+          const html = $$render.call(
+            Slot,
+            result,
+            {},
+            bindings,
+            slots,
+            context
+          );
+          const leaf = !slots.default && current.length === 0;
 
-        const vdom = leaf
-          ? React.createElement(
-              reactComponent as React.FunctionComponent,
-              props
+          const vdom = leaf
+            ? React.createElement(
+                reactComponent as React.FunctionComponent,
+                props
+              )
+            : React.createElement(
+                reactComponent as React.FunctionComponent,
+                props,
+                [
+                  React.createElement("svelte-slot", {
+                    key: "svelte-slot",
+                    style: { display: "contents" },
+                    dangerouslySetInnerHTML: { __html: html },
+                  }),
+                  ...current.map((child, i) =>
+                    React.createElement(
+                      `ssr-portal${i}`,
+                      { key: `ssr-portal${i}` },
+                      React.createElement(child.reactComponent, child.props)
+                    )
+                  ),
+                ]
+              );
+          let rendered = renderToString(
+            React.createElement(
+              SvelteToReactContext.Provider,
+              {
+                value: context || contexts,
+              },
+              vdom
             )
-          : React.createElement(
-              reactComponent as React.FunctionComponent,
-              props,
-              [
-                React.createElement("svelte-slot", {
-                  key: "svelte-slot",
-                  style: { display: "contents" },
-                  dangerouslySetInnerHTML: { __html: html },
-                }),
-                ...current.map((child, i) =>
-                  React.createElement(
-                    `ssr-portal${i}`,
-                    { key: `ssr-portal${i}` },
-                    React.createElement(child.reactComponent, child.props)
-                  )
-                ),
-              ]
-            );
-        let rendered = renderToString(
-          React.createElement(
-            SvelteToReactContext.Provider,
-            {
-              value: context || contexts,
-            },
-            vdom
-          )
-        );
-        current.forEach((_, i) => {
-          const start = `<ssr-portal${i}>`;
-          const end = `</ssr-portal${i}>`;
-          const startPosition = rendered.indexOf(start);
-          const endPosition = rendered.indexOf(end);
-          let content = "";
-          if (startPosition !== -1) {
-            content = rendered.substring(
-              startPosition + start.length,
-              endPosition
-            );
-            rendered =
-              rendered.substring(0, startPosition) +
-              rendered.substring(endPosition + end.length);
-          }
-          rendered = rendered.replace(`<ssr-portal${i}/>`, content);
-        });
-        current = undefined;
-        return rendered;
+          );
+          current.forEach((_, i) => {
+            const start = `<ssr-portal${i}>`;
+            const end = `</ssr-portal${i}>`;
+            const startPosition = rendered.indexOf(start);
+            const endPosition = rendered.indexOf(end);
+            let content = "";
+            if (startPosition !== -1) {
+              content = rendered.substring(
+                startPosition + start.length,
+                endPosition
+              );
+              rendered =
+                rendered.substring(0, startPosition) +
+                rendered.substring(endPosition + end.length);
+            }
+            rendered = rendered.replace(`<ssr-portal${i}/>`, content);
+          });
+          return rendered;
+        } finally {
+          current = undefined;
+        }
       },
     } as any;
   }