Spotlight template - Experiencing MDX errors

[brifiction]

What component (if applicable)

• URL for category: https://tailwindui.com/templates/spotlight
• Component name: Spotlight template

Describe the bug After installing all dependencies for the spotlight template, I've encountered an error below - and I am unable to narrow down, if it is the MDX configurations with the provided custom plugins, or a NextJS problem.

Unhandled Runtime Error
Error: (0 , next_mdx_import_source_file__WEBPACK_IMPORTED_MODULE_1__.useMDXComponents) is not a function

For more information, I've provided the versioning details below:

1. node = v21.5.0
2. pnpm = 8.14.1

And the next.config.mjs file (it's the default config from template):

import rehypePrism from '@mapbox/rehype-prism'
import nextMDX from '@next/mdx'
import remarkGfm from 'remark-gfm'

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

const withMDX = nextMDX({
  extension: /\.mdx?$/,
  options: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypePrism],
  },
})

export default withMDX(nextConfig)

To Reproduce Steps to reproduce the behavior:

1. Download spotlight template
2. Go to downloaded spotlight template directory, and install dependencies. FYI, I use pnpm i.
3. After installing all dependencies, run pnpm dev to load NextJS web app.
4. By default, http://localhost:3000 on local, and proceed to example MDX page http://localhost:3000/articles/crafting-a-design-system-for-a-multiplanetary-future - and see error.

Expected behavior The expected behaviour is to have any and all MDX pages loaded & rendered, successfully.

Screenshots

Browser/Device (if applicable) N/A

Additional context None.

[brifiction]

FYI, I've managed to figure out the issue. For latest nextjs, we need to declare 'use client' etc for web pages rendering. Now, in the spotlight template, we don't have these declared yet, as well as async pages are not allowed.

Thus, the way you load & render (for example) articles (AKA the MDX pages), will have to "comply" with the nextjs changes and guidelines in serving 'client' versus 'server', and more.

Issue resolved, as the solution is to refactor everything, according to nextjs 14.x (and beyond).

Edit: FYI, I was wrong about not finding 'use client' declarations in this issue, finally found declared 'use client' in relevant client components - all good there. Now, managed to narrow down the reported issue to MDX handling & render methods., figured out the template's issues from these latest findings

[reinink]

@brifiction Hey! Glad you got this figured out, but I am curious, when did you happen to download the Spotlight template from the Tailwind UI website? I ask only because last week we actually published an updated version of this template that is now on Next.js v14.

When I try to follow the steps above I am not able to reproduce this issue.

Basically just want to make sure there isn't anything still broken in this template 👍

[brifiction]

@reinink Thank you for following up. To answer your questions, replying for each sentence:

1. When did you happen to download the Spotlight template from the Tailwind UI website? - Yesterday, 18th Jan 24.
2. I ask only because last week we actually published an updated version of this template that is now on Next.js v14 - Yes, the dependencies is fine and aligned with Next 14.x, however note that the MDX config and setup is causing issues to load /articles on render (same issue & screenshot as original post above).

No worries, as I do love the work put into a template like Spotlight, especially the scroll effects & transition usage.

But yeah, still wrestling with the MDX render issues, for example simply loading /articles route or directly rendering "an article", still returns MDX render issues.

Please note, I did not upgrade dependency versions after the template pull, to establish a baseline on resolving the issues found.

Additional context about reported issue

If it helps, when I quote "still returns MDX render issues" it is mostly relevant to:

1. The usage of getArticles - The implemented way of getArticles async function, this needs to be improved (I reckon). To support this, I removed snippets of code bit by bit, and managed to successfully load "an article" page as "article layout without the MDX content".
2. Handling MDX files - The way it is resolving "paths" for iterating each MDX file, I reckon the current method is causing issues like fs related issues (see Screenshots (additional) section below).
3. Async pages - I am not a NextJS expert, but usage with the metadata exports and async pages, along with applying the new defined "use client" at top for front-end, are to be factored in for (possible) refactoring.

Thanks again

In meantime, I'll apply my own complete customisation from spotlight initial template, such as adding new dependencies & refactoring affected areas of rendering MDX. Also shoutout to the authors who worked on Syntax template, the way of rendering MDX with MDX plugins in that template is sublime - thus, I am attempting to replicate Syntax into Spotlight template.

Thanks again for looking into this issue, I look forward to your findings & new template releases as always!

Screenshots (additional)