Next.js Discord

Discord Forum

TS issue: Can't type `.mdx` exports with `.d.ts` module

Unanswered
Mugger Crocodile posted this in #help-forum
Open in Discord
Mugger CrocodileOP
Hi! I've installed 'remark-mdx-frontmatter' for front'matter support.

As the docs indicate, I'm importing mdx as:
import Article, { meta as ArticleMeta } from '@/md/article.mdx'. This works, as I can see the actual meta parsed out of the front-matter and use it as any object.

But the meta import is flagged failing by the typechecker, which states: Module '"@/md/matematica.mdx"' has no exported member 'meta'. Did you mean to use 'import meta from "@/md/matematica.mdx"' instead? ts(2614)

I have added a .d.ts file to the root of my project trying to hint TS at this:
declare module '*.mdx' {
  import type { ComponentType } from 'react'

  const Component: ComponentType
  export default Component

  export const meta: unknown
}


But the error won't go away, no matter how I phrase out that file (tried namespaces and other acrobatics). It just seems TS is not picking up the declaration. The file is called mdx.d.ts and it's located at the project root, by next-end.d.ts and app. It should get picked up as the tsconfig includes all .ts files of course. And on top of it I'm including it explicitely.

{
  "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": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "mdx.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "**/*.mdx"],
  "exclude": ["node_modules"]
}


Any help would be much appreciated

0 Replies