Got error on SSR and dynamic layout

[chalist]

I try to create a dynamic layout for the vue app. without dynamic layout everything is fine. But when I try to add dynamic layout, I got this error:

TypeError: src.replace is not a function
    at Object.escapeHtmlComment (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected]\node_modules\@vue\shared\dist\shared.cjs.js:334:14)
    at Proxy.renderVNode (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:720:34)
    at _sfc_ssrRender (/src/Layout.vue:44:25)
    at renderComponentSubTree (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
    at renderComponentVNode (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
    at Proxy.ssrRenderComponent (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10)
    at _sfc_ssrRender (/src/App.vue:21:31)
    at renderComponentSubTree (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
    at renderComponentVNode (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
    at Proxy.renderToString (C:\Users\app\vue-ssr\node_modules\.pnpm\@[email protected][email protected]\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:902:24)
    at render (/src/entry-server.js:17:44)
    at async file:///C:/Users/app/vue-ssr/server.js:77:39

Error points to this line:

      const [appHtml, preloadLinks] = await render(url, manifest);

What I have?

App.vue

<script setup lang="ts">
import AppLayout from '@/Layout.vue';
</script>

<template>
  <AppLayout />
</template>

<style scoped></style>

Layout.vue

<script setup lang="ts">
import { markRaw, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

import SiteLayout from '@/layouts/SiteLayout.vue';

const layout = ref();
const route = useRoute();

watch(
  (): string | undefined => route.meta?.layout as string | undefined,
  async (metaLayout): Promise<void> => {
    try {
      console.log(metaLayout);
      const component = metaLayout && (await import(/* @vite-ignore */ `@/layouts/${metaLayout}.vue`));
      layout.value = markRaw(component?.default || SiteLayout);
    } catch (e) {
      layout.value = markRaw(SiteLayout);
    }
  },
  { immediate: true }
);
</script>

<template>
  <component :is="layout"> <router-view /> </component>
</template>

SiteLayout.js

<template>
  <div>
    <div>header default</div>
    <slot></slot>
    <div>footer</div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

main.js

import './assets/main.css';
import 'virtual:uno.css';

import { createPinia } from 'pinia';

import App from './App.vue';
import { createRouter } from './router';
import { createSSRApp } from 'vue';
import { createHead } from '@vueuse/head';

const isSSR = typeof window === 'undefined';

export function createApp() {
  const app = isSSR ? createSSRApp(App) : createApp(App);
  const pinia = createPinia();
  app.use(pinia);
  const router = createRouter();
  app.use(router);
  const head = createHead();
  app.use(head);

  return { app, router };
}

server.js

import fs from "node:fs";
import path from "node:path";
import { fileURLToPath } from "node:url";
import express from "express";


const isTest = process.env.VITEST;

export async function createServer(
  root = process.cwd(),
  isProd = process.env.NODE_ENV === "production",
  hmrPort
) {
  const __dirname = path.dirname(fileURLToPath(import.meta.url));
  const resolve = (p) => path.resolve(__dirname, p);

  const indexProd = isProd
    ? fs.readFileSync(resolve("dist/client/index.html"), "utf-8")
    : "";

  const manifest = isProd
    ? JSON.parse(
        fs.readFileSync(resolve("dist/client/ssr-manifest.json"), "utf-8")
      )
    : {};

  const app = express();

  /**
   * @type {import('vite').ViteDevServer}
   */
  let vite;
  if (!isProd) {
    vite = await (
      await import("vite")
    ).createServer({
      base: "/",
      root,
      logLevel: isTest ? "error" : "info",
      server: {
        middlewareMode: true,
        watch: {
          usePolling: true,
          interval: 100,
        },
        hmr: {
          port: hmrPort,
        },
      },
      appType: "custom",
    });
    app.use(vite.middlewares);
  } else {
    app.use((await import("compression")).default());
    app.use(
      "/",
      (await import("serve-static")).default(resolve("dist/client"), {
        index: false,
      })
    );
  }

  app.use("*", async (req, res) => {
    try {
      const url = req.originalUrl;

      let template, render;
      if (!isProd) {
        template = fs.readFileSync(resolve("index.html"), "utf-8");
        template = await vite.transformIndexHtml(url, template);
        render = (await vite.ssrLoadModule("/src/entry-server.js")).render;
      } else {
        template = indexProd;
        render = (await import("./dist/server/entry-server.js")).render;
      }

      const [appHtml, preloadLinks] = await render(url, manifest);

      console.log(appHtml);

      const html = template
        .replace(`<!--preload-links-->`, preloadLinks)
        .replace(`<!--app-html-->`, appHtml);

      res.status(200).set({ "Content-Type": "text/html" }).end(html);
    } catch (e) {
      vite && vite.ssrFixStacktrace(e);
      console.log(e.stack);
      res.status(500).end(e.stack);
    }
  });

  return { app, vite };
}

if (!isTest) {
  createServer().then(({ app }) =>
    app.listen(4000, () => {
      console.log("http://localhost:4000");
    })
  );
}

entry-client.js

import { createApp } from './main'

const { app, router } = createApp()

router.isReady().then(() => {
  app.mount('#app')

  console.log('hydrated')
})

entry-server.js

import { basename } from "node:path";
import { renderToString } from "vue/server-renderer";
import { createApp } from "./main";

export async function render(url, manifest) {
  const { app, router } = createApp();

  await router.push(url);
  await router.isReady();

  const ctx = {};
  const html = await renderToString(app, ctx);

  const preloadLinks = renderPreloadLinks(ctx?.modules || {}, manifest);
  return [html, preloadLinks];
}

function renderPreloadLinks(modules, manifest) {
  let links = "";
  const seen = new Set();
  modules.forEach((id) => {
    const files = manifest[id];
    if (files) {
      files.forEach((file) => {
        if (!seen.has(file)) {
          seen.add(file);
          const filename = basename(file);
          if (manifest[filename]) {
            for (const depFile of manifest[filename]) {
              links += renderPreloadLink(depFile);
              seen.add(depFile);
            }
          }
          links += renderPreloadLink(file);
        }
      });
    }
  });
  return links;
}

function renderPreloadLink(file) {
  if (file.endsWith(".js")) {
    return `<link rel="modulepreload" crossorigin href="${file}">`;
  } else if (file.endsWith(".css")) {
    return `<link rel="stylesheet" href="${file}">`;
  } else if (file.endsWith(".woff")) {
    return ` <link rel="preload" href="${file}" as="font" type="font/woff" crossorigin>`;
  } else if (file.endsWith(".woff2")) {
    return ` <link rel="preload" href="${file}" as="font" type="font/woff2" crossorigin>`;
  } else if (file.endsWith(".gif")) {
    return ` <link rel="preload" href="${file}" as="image" type="image/gif">`;
  } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) {
    return ` <link rel="preload" href="${file}" as="image" type="image/jpeg">`;
  } else if (file.endsWith(".png")) {
    return ` <link rel="preload" href="${file}" as="image" type="image/png">`;
  } else {
    return "";
  }
}

Anybody can help to fix this?