nextjs-prism-markdown not working on Next13 with app dir

[alexandreferreirafr]

I couldn't make prismjs work on the new app dir on my project.

To be sure, it was not something with my project I took your project and migrate it to the Next 13

npm i next@latest react@latest react-dom @latest

then I changed next.config.js

module.exports = {
  experimental: {
    appDir: true,
  },
  async redirects() {
    return [
      {
        source: '/',
        destination: '/prism',
        permanent: true
      }
    ];
  }
};

then I moved pages/[slug].tsx into app/[slug]/page.tsx and updated the file:

import Layout from '../../components/Layout';
import { getAllDocs, getDocBySlug } from '../../lib/docs';
import markdownToHtml from '../../lib/markdown';

export default async function Doc({ params }) {
  const doc = getDocBySlug(params.slug);
  const content = await markdownToHtml(doc.content || '');
  return <Layout meta={doc.meta}>{content}</Layout>;
}

export async function generateStaticParams() {
  const docs = getAllDocs();

  return docs.map((doc) => {
    return {
      slug: doc.slug
    }
  });
}

Still not working, even after cleaning node_modules and installing all over again.

If I try to run it as a RSC I have this error:

If I add "use client" to try to run it as a client component (to match the behaviour of the pages dir), then I have this error:

Super weird. And to be honest parsing markdown and html to add code highlighting is really a task that I would really avoid to execute on the client.

Do you guys at Vercel have any idea how to make this work? 🙏

My best regards