Returning strings from server functions with some specific characters causes hydration errors (e.g '`')

[EugenEistrach]

Which project does this relate to?

Start

Describe the bug

Returning strings with some specific characters causes hydration errors e.g:

import { Outlet, createFileRoute } from "@tanstack/react-router";
import { createServerFn } from "@tanstack/start";

export const Route = createFileRoute("/")({
  loader: async () => {
    return await getSomeDataWithError();
  },
  component: LayoutComponent,
});

const getSomeDataWithError = createServerFn("GET", async () => {
  return {
    test: "test",
    error: "`", // This will cause hydration errors
  };
});

function LayoutComponent() {
  const { test } = Route.useLoaderData();
  return (
    <div className="p-2">
      <div className="border-b">{test}</div>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

Your Example Website or App

https://stackblitz.com/edit/tanstack-router-2feezb?file=app%2Froutes%2Freproduce.tsx

Steps to Reproduce the Bug or Issue

Check the /reproduce route

Expected behavior

We should be able to return any kind of valid strings from our server functions.

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response