Dynamic imports of MDX

[jcarlson]

Summary

I have a Hugo site that I am converting to Next.js, so I have a bunch of Markdown content files for all my blog posts. Eventually, I plan to migrate those posts to a CMS like Contentful, but for the immediate future, the plan is to put all my Markdown content in ./content/blog/... and build my layouts in ./src/app/blog/....

I want my Blog page to load the right Markdown content dynamically, using information from the slug, so my page is: ./src/app/blog/[slug]/page.tsx.

I followed the instructions in the MDX Guide, specifically for doing dynamic imports, and I got it working. Here is my page.tsx, roughly:

import React from "react";
import dynamic from "next/dynamic";

export default async function Blog({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params

  // either of these import methods work
  const Markdown1 = dynamic(() => import(`@/content/blog/${slug}.mdx`))
  const {default:Markdown2} = await import(`@/content/blog/${slug}.mdx`)

  return (
    <article>
      <Markdown1 />
      <Markdown2 />
    </article>
  )
}

export function generateStaticParams() {
  return [{ slug: 'first-post' }]
}

Since I want to eventually move my content to a CMS, I'd like to encapsulate the content-loading logic here into a library function, so that when the time comes to migrate to Contentful, I don't need to update several dozen page.tsx files and instead can just update one library file.

So I created a utility helper:

// ./src/lib/markdown.ts

import React from "react";
import dynamic from "next/dynamic";

export async function getMarkdown(slug: string) {
  const {default: Markdown} = await import(`@/content/${slug}.mdx`)
  return Markdown as React.ComponentType
}

export function getMarkdownDynamic(slug: string) {
  return dynamic(() => import(`@/content/${slug}.mdx`))
}

I updated my page.tsx to use these helpers:

// const Markdown1 = dynamic(() => import(`@/content/blog/${slug}.mdx`))
// const {default:Markdown2} = await import(`@/content/blog/${slug}.mdx`)

const Markdown1 = await getMarkdown(`blog/${slug}`)
const Markdown2 = getMarkdownDynamic(`blog/${slug}`)

The page no longer works. Neither getMarkdown nor getMarkdownDynamic work correctly when located in the ./src/lib directory. They do work if I define those functions locally to my page.tsx but they do not work as library code.

This is the error I get when trying to dynamically load MDX outside the app directory:

 ⨯ ./src/lib/markdown.ts:7:37
Module not found: Can't resolve '@/content'
   5 |
   6 | export async function getMarkdown(slug: string) {
>  7 |   const {default: Markdown} = await import(`@/content/${slug}.mdx`)
     |                                     ^
   8 |   return Markdown as React.ComponentType
   9 | }
  10 |

Is what I'm trying to do just not possible? My next step was going to be ditching the next/mdx configuration and parsing the Markdown manually in my library functions. This tutorial seems almost perfect, but it handles .md not .mdx and I'd rather like to have .mdx support.

Any suggestions?

Additional information

No response

Example

No response

[icyJoseph]

Does it work if you add your library to https://nextjs.org/docs/app/api-reference/config/next-config-js/transpilePackages?

[jcarlson]

What would my package name be here? My library code is at ./src/lib/markdown.ts so the lib is a sibling to app.

[icyJoseph]

aha that's weird ~ I thought it was more of a dependency package you had made -

it tsconfig including this lib file?

[jcarlson]

Here's my entire tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"],
      "@/content/*": ["./content/*"],
      "@/assets/*": ["./assets/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

[jcarlson]

ChatGPT suggested the following:

What’s biting you here is dynamic imports that use a path alias inside a template string when they live outside the app/ tree.

I moved my utility helper to ./src/app/lib/markdown.ts, and that still didn't work, so I moved it back to ./src/lib/markdown.ts.

ChatGPT also suggested replacing the aliased import path with a relative path, so I gave that a whirl:

// ./src/lib/markdown.ts

import React from "react";
import dynamic from "next/dynamic";

export async function getMarkdown(slug: string) {
  const {default: Markdown} = await import(`../../content/${slug}.mdx`)
  return Markdown as React.ComponentType
}

export function getMarkdownDynamic(slug: string) {
  return dynamic(() => import(`../../content/${slug}.mdx`))
}

That does seem to work, so the issue seems to revolve around the use of import(`@/content/${slug}`) versus import(`../../content/${slug}`). But I don't have any idea why.

[jcarlson]

What is DX?

I'm using Webpack and disabled Turbopack because I was having additional problems getting some of the remark plugins I want to use working with Turbopack.

[icyJoseph]

Developer Experience, it is a nice to have that makes paths look like absolute paths with a base reference, so that you don't have to think of relative imports and nesting

The strange thing is that it says Module not found: Can't resolve '@/content' not that it didn't expand it and couldn't find it, but that it just plain didn't even know what do with it.

[icyJoseph]

If you change .mdx to .ts or just remove the extension, does the error message change?

[jcarlson]

Nope, no change in error.

Just to make sure there wasn't anything wrong with my template literal, I had my utility function output the requested template:

export async function getMarkdown(slug: string) {
  const mdx = `@/content/${slug}.mdx`
  console.log("MDX", mdx)
  const {default: Markdown} = await import(mdx)
  return Markdown as React.ComponentType
}

It does correctly interpret the string here, but same error:

MDX @/content/blog/first-post.mdx
 ⨯ Error: Cannot find module '@/content/blog/first-post.mdx'
    at <unknown> (.next/server/app/blog/[slug]/page.js:200:11)
    at async getMarkdown (src/lib/markdown.ts:9:30)
    at async Blog (src/app/blog/[slug]/page.tsx:11:20)
   7 |   const mdx = `@/content/${slug}.mdx`
   8 |   console.log("MDX", mdx)
>  9 |   const {default: Markdown} = await import(mdx)
     |                              ^
  10 |   return Markdown as React.ComponentType
  11 | }
  12 | {
  code: 'MODULE_NOT_FOUND',
  digest: '2046483452'
}
 GET /blog/first-post/ 500 in 82ms

I guess for now I will just run with relative imports in this utility function. It's either that, or I quit using next/mdx entirely and just roll my own MDX support by using using fs to read the raw file from disk and then parsing it using mdx-js/mdx directly. I'm likely going to have to do that eventually if I want to load my blog content from a CMS instead of the local file system.

[jcarlson]

Thank you for your help on this @icyJoseph