ts-protocol Template isn't showing the sub-section

[ynnelson]

Describe the bug When I use the protocol template locally the subsection load up just fine but when deploying it to Vercel they stopped working. This bug also seems to be present in the live preview of Protocol (see the screenshot below). I read issue #1500 but unfortunately it seems to be a different problem.

Expected behavior I would expect the sub section to show just as they do locally.

Screenshots

[ynnelson]

The issue is the code that generates the section metadata, when deployed to Vercel allSections is empty, I wonder if it's because Vercel only has access to the .mdx files at build time and not at Runtime. Thought about using GetStaticProps but you can't use that function in the RootLayout only in a page. So alternative would be a prebuild script that generates the data perhaps but that feels like a messy solution.

Any ideas?

[reinink]

Hey folks! This is definitely a strange one. This seems to happen randomly, and redeploying seems to fix it. For example:

https://tailwindui-template-protocol-git-protocol-test-tailwindlabs.vercel.app/

Compared that to the production build:

https://protocol.tailwindui.com/

Here's a screenshot, just in case these builds change:

Not sure exactly what's up here, but I've reached out to our contacts at Vercel to see if they have any suggestions. I'll report back when I know more 👍

[reinink]

Hey there! So I think I got to the bottom of this — @ynnelson had the right idea, the MDX files are only available at build time and are not included in the production artifacts.

By default Next.js automatically purges all files it deems unnecessary for production builds (learn more here), and since the MDX files included in the Protocol template aren't needed after the initial build (at least from what Next.js and Vercel can tell), they aren't included in the production build.

The way to (apparently) solve this is using the experimental outputFileTracingIncludes option to explicitly tell Next.js to keep certain files around in the production build.

To fix this in the Protocol template, update your next.config.mjs file to include the following:

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx'],
+   experimental: {
+     outputFileTracingIncludes: {
+       '/**/*': ['./src/app/**/*.mdx'],
+     },
+   },
  }

Alternatively, you can just re-download this file from the Tailwind UI website.

That should fix it! 🤞

[ynnelson]

Thank you so much for looking into this!! Super helpful!