Syntax site breaks after minor Next.js upgrade

[marko-configo]

What component (if applicable)

• URL for category: https://tailwindui.com/templates/syntax
• Component name: Syntax

Describe the bug The template works as it comes, however npm reports 4 vulnerabilities. Once those are fixed using npm audit fix --force, next.js has been upgraded from 13.4.16 to 13.5.4, and the template fails with

 ⨯ src/app/page.md (79:20) @ MarkdocComponent
 ⨯ TypeError: Cannot read properties of undefined (reading 'content')
    at MarkdocComponent (./src/app/page.md:93:82)
    at stringify (<anonymous>)
digest: "1482568353"
  77 |     const markdoc = props.markdoc;
  78 |     // Only execute HMR code in development
> 79 |     return renderers.react(markdoc.content, React, {
     |                    ^
  80 |         components: {
  81 |             ...components,
  82 |             // Allows users to override default components at runtime, via their _app

when run.

To Reproduce Steps to reproduce the behavior:

1. Download and unzip the template.
2. npm install
3. npm audit fix --force to address all vulnerabilities.
4. npm run dev
5. Enjoy the error.

[RobinMalfait]

Hey!

This is a bit of a complex one. The issue you currently see can be fixed and we already pushed an update to https://tailwindui.com/templates/syntax to solve this.

But, before you can do this you have to rollback to Next.js version 13.4.16 first.

Next, you can bump the markdoc related dependencies:

npm install @markdoc/markdoc@latest @markdoc/next.js@latest

Next, you can update the next.config.mjs file:

diff --git a/syntax-ts/next.config.mjs b/syntax-ts/next.config.mjs
index a9ed3c8..9b975cb 100644
--- a/syntax-ts/next.config.mjs
+++ b/syntax-ts/next.config.mjs
@@ -1,25 +1,10 @@
 import withMarkdoc from '@markdoc/next.js'
-import { createLoader } from 'simple-functional-loader'

 import withSearch from './src/markdoc/search.mjs'

 /** @type {import('next').NextConfig} */
 const nextConfig = {
   pageExtensions: ['js', 'jsx', 'md', 'ts', 'tsx'],
-  webpack(config) {
-    config.module.rules.unshift({
-      test: /\.md$/,
-      use: [
-        createLoader(function (source) {
-          return (
-            source + '\nexport const metadata = frontmatter.nextjs?.metadata;'
-          )
-        }),
-      ],
-    })
-
-    return config
-  },
 }

 export default withSearch(

We can do this because this configuration is now included in the updated @markdoc/next.js dependency,

To make sure you are not dealing with stale caches you can delete the .next folder:

rm -rf ./.next

Now, this is where it gets tricky. You will notice that the vulnerabilities are still there. Running npm audit fix --force will bump the Next.js version. Unfortunately this version contains a bug right now that we can't solve in our templates.

Error: Cannot access Fence.propTypes on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

Because of this, I would recommend to stay on the 13.4.16 version for now until this is fixed in Next.js itself.

Once this is fixed in Next.js, we will update the template accordingly.

Related issue(s):

• https://github.com/vercel/next.js/issues/52415