so firstly i was using page router and then i migrated to app router and this is when i saw this error which is really unexpected why is it even giving a build error

import { PageTitle } from "$components/PageTitle";
import { getAllPageContent } from "$lib/legal";
import { formatDate } from "$utils";
import { GetStaticProps } from "next";

interface PageFrontmatter {
    title: string;
    lastUpdated: string;
}

interface Props {
    content: string;
    frontmatter: PageFrontmatter;
}

export default function PrivacyPage({ content, frontmatter }: Props) {
    return (
        <>
            <PageTitle title={frontmatter.title} />

            <section className="md">
                <h1>{frontmatter.title}</h1>
                <p>Last Updated: {formatDate(frontmatter.lastUpdated)}</p>

                <div dangerouslySetInnerHTML={{ __html: content }} />
            </section>
        </>
    );
}

export const getStaticProps: GetStaticProps = async () => {
    const htmlContent = await getAllPageContent("privacy");

    return {
        props: {
            content: htmlContent.content,
            frontmatter: htmlContent.frontmatter,
        },
    };
};

this is the code i originally had from the page router

"use client"
import { getAllPageContent } from "$lib/legal";
import { formatDate } from "$utils";

interface PageFrontmatter {
  title: string;
  lastUpdated: string;
}

interface Props {
  content: string;
  frontmatter: PageFrontmatter;
}
export default async function PrivacyPage({ content, frontmatter }: Props) {
  const htmlContent = await getAllPageContent("privacy");
  return (
    <>
      <section className="md">
        <h1>{frontmatter.title}</h1>
        <p>Last Updated: {formatDate(frontmatter.lastUpdated)}</p>

        <div dangerouslySetInnerHTML={{ __html: content }} />
      </section>
    </>
  );
}

this is the code i now have for the app router

import fs from "fs";
import path from "path";
import rehypeAutolinkHeadings from "rehype-autolink-headings";
import rehypeHighlight from "rehype-highlight";
import rehypeMermaid from "rehype-mermaid";
import rehypeSlug from "rehype-slug";
import rehypeStringify from "rehype-stringify";
import remarkExtractFrontmatter from "remark-extract-frontmatter";
import remarkFrontmatter from "remark-frontmatter";
import gfm from "remark-gfm";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import { unified } from "unified";
import yaml from "yaml";

const legalDir = path.join(process.cwd(), "content", "legal");

export const getAllPageContent = async (page: string) => {
    const filePath = path.join(legalDir, `${page}.md`);
    const fileContent = fs.readFileSync(filePath, "utf8");

    const processor = await unified()
        .use(remarkParse)
        .use(gfm)
        .use(remarkFrontmatter, ["yaml"])
        .use(remarkExtractFrontmatter, { yaml: yaml.parse })
        .use(remarkRehype, { allowDangerousHtml: true })
        .use(rehypeMermaid, { strategy: "pre-mermaid" })
        .use(rehypeStringify)
        .use(rehypeSlug)
        .use(rehypeAutolinkHeadings, { behavior: "wrap" })
        .use(rehypeHighlight)
        .process(fileContent);

    return {
        content: processor.toString(),
        frontmatter: processor.data,
    };
};

this is the function which is used in the page.tsx, what this does is create a markup from a .md file