cannot load the information from netlify-cms

Question

I have a sveltekit app with netlify-cms added to it. I have followed this tutorial on sapper. https://dev.to/avcohen/svelte-sapper-netlify-cms-3mn8

I have the ability to input information through the website. But I do not have the ability to see the information.

I think most of the info I give is irrelevant but here it is:

the error that pos up on trying to see the information is

500

Cannot read property 'title' of undefined
TypeError: Cannot read property 'title' of undefined

the console that appears on the side is:

    Error with Permissions-Policy header: Unrecognized feature: 'interest-cohort'.
Test#/:1 GET https://xxx.netlify.app/blog/Test 500
index.js:25 netlify-cms-app 2.15.40
bootstrap.js:83 netlify-cms-core 2.48.0
bootstrap.js:106 Uncaught TypeError: Cannot read property 'appendChild' of null
    at bootstrap.js:106
    at Object._ [as init] (bootstrap.js:134)
    at Module.<anonymous> (index.js:10)
    at n (bootstrap:19)
    at bootstrap:83
    at netlify-cms.js:1
    at universalModuleDefinition:9
    at universalModuleDefinition:1
(anonymous) @ bootstrap.js:106
_ @ bootstrap.js:134
(anonymous) @ index.js:10
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ netlify-cms.js:1
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1
config.js:429 GET https://xxx.netlify.app/blog/config.yml 500
(anonymous) @ config.js:429
(anonymous) @ config.js:567
(anonymous) @ index.js:8
dispatch @ VM181:14608
_ @ bootstrap.js:116
(anonymous) @ index.js:10
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ netlify-cms.js:1
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1
config.js:439 Uncaught (in promise) Error: Failed to load config.yml (500)
    at config.js:439
    at async config.js:567

my endpoint is :

    import path from "path";
    import fs from "fs";
    import grayMatter from "gray-matter";
    import marked from "marked";
    
    const getPost = (fileName) => {
      return fs.readFileSync(
        path.resolve("static/posts/", `${fileName}.md`),
        "utf-8"
      );
    };
    
    export function get(req, res, _) {
      const { slug } = req.params;
    
      const post = getPost(slug);
      const renderer = new marked.Renderer();
    
      const { data, content } = grayMatter(post);
      const html = marked(content, { renderer });
    
      if (html) {
        res.writeHead(200, {
          "Content-Type": "application/json",
        });
    
        res.end(JSON.stringify({ html, ...data }));
      } else {
        res.writeHead(404, {
          "Content-Type": "application/json",
        });
    console.log(res, "helps");
        res.end(
          JSON.stringify({
            message: `Not found`,
          })
        );
      }
    }


the page to view the information on:

<script context="module">
    export async function preload({ params, query }) {
        // the `slug` parameter is available because
        // this file is called [slug].svelte
        const res = await this.fetch(`blog/${params.slug}.json`);
        const data = await res.json();
        if (res.status === 200) {
            return { post: data };
        } else {
            this.error(res.status, data.message);
        }
    }
</script>

<script>
    export let post;
</script>

<style>
    /*
        By default, CSS is locally scoped to the component,
        and any unused styles are dead-code-eliminated.
        In this page, Svelte can't know which elements are
        going to appear inside the {{{post.html}}} block,
        so we have to use the :global(...) modifier to target
        all elements inside .content
    */
    .content :global(h2) {
        font-size: 1.4em;
        font-weight: 500;
    }
    .content :global(pre) {
        background-color: #f9f9f9;
        box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
        padding: 0.5em;
        border-radius: 2px;
        overflow-x: auto;
    }
    .content :global(pre) :global(code) {
        background-color: transparent;
        padding: 0;
    }
    .content :global(ul) {
        line-height: 1.5;
    }
    .content :global(li) {
        margin: 0 0 0.5em 0;
    }
</style>

<svelte:head>
    <title>{post.title}</title>
</svelte:head>

<h1>{post.title}</h1>

<div class='content'>
    {@html post.html}
</div>

I am not very experienced with endpoints or sveltekit, can you help find out why the information is not being shown?