Always get ts error when exporting frontmatter from mdx file

[hallee9000]

Link to the code that reproduces this issue

https://github.com/hallee9000/mdx-types-issue

To Reproduce

1. Add remark-frontmatter and remark-mdx-frontmatter plugin in next.config.mjs

import createMDX from '@next/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
import rehypeMdxImportMedia from 'rehype-mdx-import-media'
import remarkHeadingID from 'remark-heading-id';
import { remarkMdxToc } from "remark-mdx-toc";

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

const withMDX = createMDX({
  options: {
    rehypePlugins: [
      rehypeMdxImportMedia,
    ],
    remarkPlugins: [
      remarkFrontmatter,
      remarkMdxFrontmatter,
      remarkHeadingID,
      remarkMdxToc
    ],
  },
})

export default withMDX(nextConfig);

2. Add mdx.d.ts file in src to custom types for mdx files

declare module "*.mdx" {
  import { Element, MDXProps } from "mdx/types";
  import type { TocEntry } from 'remark-mdx-toc';

  export default function MDXContent(props: MDXProps): Element;

  // 导出 frontmatter 和 toc
  export const frontmatter: {
    title: string;
  };

  export const toc: TocEntry[];

}

3. Import mdx file in page.tsx

src/content/post.mdx file:

---
title: 'Hello world'
---

This is the content of the post.

src/app/page.tsx file:

import React from "react"
import Content, { frontmatter } from "@/content/post.mdx";
console.log(frontmatter)
export default async function PostPage() {

  return (
    <div className="py-6">
      <h1 className="mb-10 text-4xl font-bold">{frontmatter.title}</h1>
      <div className="flex gap-6">
        <div className="prose flex-1">
          <Content />
        </div>
      </div>
    </div>
  );
}

I can get the right value ({title: "hello world"}) in the console but there is always a ts error tell me:

Module '"@/content/post.mdx"' has no exported member 'frontmatter'. Did you mean to use 'import frontmatter from "@/content/post.mdx"' instead?ts(2614)

The error disappeared after running Restart typescript server but appeared again when I change something of this file.

Current vs. Expected behavior

No typescript error ts(2614)

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:14:30 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 22.6.0
  npm: 10.8.2
  Yarn: 1.22.19
  pnpm: 9.11.0
Relevant Packages:
  next: 14.2.13 // There is a newer version (14.2.14) available, upgrade recommended!
  eslint-config-next: 14.2.13
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A
 ⚠ There is a newer version (14.2.14) available, upgrade recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Markdown (MDX)

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I tried several methods but none worked.

1. Restart nextjs app
2. Clear node_modules and .next folder and reinstall
3. Add mdx.d.ts's path to include of tsconfig.json