Repository: next.js
Issue: Always get ts error when exporting frontmatter from mdx file
Labels: bug,Markdown (MDX)

### 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`
```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 
```ts
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:
```mdx
---
title: 'Hello world'
---

This is the content of the post.
```

`src/app/page.tsx` file:
```tsx
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

```bash
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`