I have written a custom plugin to transform a frontmatter in MDX files to a constant export frontMatter
. For example, the file a.mdx
:
---
title: "Some Title"
---
# Content
Is transformed to the following compile-time when imported in a Next.js Page directly:
# Content
export const frontMatter = {
title: "Some Title"
}
So in Typescript & Next.js page file, I am importing as:
import AComponent, { frontMatter } from "a.mdx"
The frontMatter
export works as intended. However, Typescript compiler doesn't recognize the custom export, unless I explicitly export it from the file. I have tried declaring modules, and I have verified that my tsconfig includes type definitions. My current definition is as following:
declare module '*.mdx' {
import { MDXProps } from 'mdx/types'
const MDXComponent: (props: MDXProps) => JSX.Element
const frontMatter: { [key: string]: any }
export { frontMatter }
export default MDXComponent
}
This doesn't work. However, as a test, if I declare the following module in the same file, the import works fine.
declare module '*.myFile' {
export const value
}
The specific error I receive is:
Module '"index.mdx"' has no exported member 'frontMatter'. Did you mean to use 'import frontMatter from "index.mdx"' instead?
To me it seems like there is something that is overriding the mdx definitions, regardless of what I do. Here is my tsconfig.json:
{
"compilerOptions": {
"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": {
... Some remappings here
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"**/*.mdx",
".next/types/**/*.ts",
"THE MODULE DECLARATION FILE"
],
"exclude": ["node_modules"]
}
It was just an intellisense issue due to my ignorance with the MDX plugin on VSCode. Add this to your tsconfig.json and restart the Typescript server, and the extension will stop reporting errors:
"compilerOptions": { ... },
"mdx": {
"plugins": [
"remark-frontmatter",
"remark-frontmatter-mdx",
]
}