how to type import * as meta from "index.mdx"?

[deadcoder0904]

i have an import:

import * as meta from './_book/index.mdx'

type Meta = {
  title: string
  description: string
  date: Date
  author: string
  keywords: string
  cover: string
}

when i do meta.title, it gives me an error:

Property 'title' does not exist on type 'typeof import("*.mdx")'.ts(2339)

how do i type it so that meta equals to Meta or it reads values from frontmatter of the index.mdx?

i tried doing (meta as Meta).title but it gave me another error:

Conversion of type 'typeof import(".mdx")' to type 'Meta' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.ts(2352)
Conversion of type 'typeof import(".mdx")' to type 'Meta' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
Type 'typeof import("*.mdx")' is missing the following properties from type 'Meta': title, description, date, author, and 2 more.ts(2352)

[wooorm]

a) Please read the readme of remark-mdx-frontmatter on how to use it: https://github.com/remcohaszing/remark-mdx-frontmatter#name, pass a name to it. Then it puts everything in an object for you.
b) You can attempt to type what MDX files expose: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/38f8f3f7b457dc38b52de08c23d66a5ced38bd9c/types/mdx/index.d.ts#L10-L53.

[remcohaszing]

You mentioned the following error:

Argument of type 'typeof import("~/Code/Book/mdx-to-pdf-epub-mobi-using-unified/src/_book/index.mdx")' is not assignable to parameter of type 'string | FunctionComponent | ComponentClass<any, any>'

This is correct, the import of a module isn’t assignable to an argument of React.createElement. However, this errors indicates your code looks something like this:

import * as Content from './_book/index.mdx'

const markup = renderToStaticMarkup(React.createElement(Content))

Whereas the code you’re sharing, looks like this:

import Content from './_book/index.mdx'

const markup = renderToStaticMarkup(React.createElement(Content))

The latter would be correct. Alternatively, you could write this:

import * as contentModule from './_book/index.mdx'

const markup = renderToStaticMarkup(React.createElement(contentModule.default))

[wooorm]

i do have declaration.d.ts for the global *.mdx.

And that’s one way to go about it, which is good! And you don’t need to type the content component then.

But you also shared that you have index.mdx.d.ts. Which only types the frontmatter. And not the content component.

The declaration.d.ts applies to all MDX files that are imported. It adds onto the defaults.
But if you have some-file.js, and manually add some-file.d.ts, those types specifically apply to that file only. It overwrites the defaults.

I believe to solve this you can either:

• fix index.mdx.d.ts
• remove index.mdx.d.ts

I believe that index.mdx.d.ts can be fixed, but there is no such fix in the DT example (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/38f8f3f7b457dc38b52de08c23d66a5ced38bd9c/types/mdx/index.d.ts#L50). @remcohaszing Is my hunch correct? Or am I wrong there?

[remcohaszing]

Ah right! index.mdx.d.ts also needs a default export, for example one of the following:

export { default } from '*.mdx'

interface Props {}

export default function MDXContent(props: Props): JSX.Element

import { FC } from 'react'

interface Props {}

declare const MDXContent: FC<Props>
export default MDXContent

[wooorm]

@remcohaszing Good to fix the example in DT too then? Which one should we go with there? I like 1 (with a comment above it), it’s short and most clearly “adds onto defaults”.

[deadcoder0904]

Whereas the code you’re sharing, looks like this:

i must've not pushed that branch. but understood the solutions. thanks guys again.

i put the following in index.mdx.d.ts & it worked. didn't have to use as any:

export { default } from '*.mdx'