Getting type error starting from today

[hassanzadeh]

Hey,
I'm not sure what you did just today, since then I'm getting a type error when doing something like this:
post?.mdxSource.frontmatter?.excerpt || "No excerpt found!"

frontmatter should have type Record<string,string>, even locally that's true, however, when I submit a job to vercel it fails there (I guess the eslint rules are stricter there) and it thinks that the type of frontmatter is Record<string, unknown>, so I get this error:

Type error: Type 'unknown' is not assignable to type 'string'.

[jasongerbes]

This is related to a recent improvement (#340) included in v4.4.0. The previous type was incorrect as frontmatter may include non-string values (e.g. boolean, number).

A related change (#342) allows you to explicitly define the type of your frontmatter:

import { serialize } from 'next-mdx-remote/serialize'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

//     👇 should have type Frontmatter
const { frontmatter } = serialize<Record<string, unknown>, Frontmatter>(source)

Or in /app:

import { compileMDX } from 'next-mdx-remote/rsc'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

export default async function Page({ source }) {
	//              👇 should have type Frontmatter
	const { content, frontmatter } = await compileMDX<Frontmatter>(source)

	return (
		<>
			<h1>{frontmatter.title}</h1>
			{content}
		</>
	)
}

[hassanzadeh]

you mean instead of using <MDXRemote /> I should use compileMDX? Are they interchangeable?

[hassanzadeh]

Wait, you can't use await inside a functional component! and if you use a sideEffect then there won't be any point using mdx-remote because the content will not be ready in the first load and hence search engines will lose it

[BRKalow]

@hassanzadeh Are you getting this error in the body of a component, or in getStaticProps after calling serialize?

The frontmatter value from serialize() can be typed like so:

import { serialize } from 'next-mdx-remote/serialize'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

//     👇 should have type Frontmatter
const { frontmatter } = serialize<Record<string, unknown>, Frontmatter>(source)

We might need to reassess this type change and make it a major version bump though. I see how it could break existing usages.

[hassanzadeh]

It's not about breaking existing usage, your MDXRemote function is Not generic you can't specify the type for that.

[BRKalow]

Component props can be typed like this:

import { MDXRemote } from 'next-mdx-remote'

interface Frontmatter {
  title: string
  published: string
  description?: string
}

interface PageProps {
  mdxSource: MDXRemoteSerializeResult<Record<string, unknown>, Frontmatter>
}

export default function Page({ mdxSource }: PageProps) {
  // has type string
  console.log(mdxSource.frontmatter.title)

  return <MDXRemote {...mdxSource} />
}

[hassanzadeh]

No you can't do that, MDXRemote expects mdxSource of type MDXRemoteSerializeResult<TScope = Record<string, unknown>, TFrontmatter = Record<string, unknown>> NOT MDXRemoteSerializeResult<Record<string, unknown>, Frontmatter>

[BRKalow]

Will take a deeper look at this tomorrow, thanks!

[hassanzadeh]

Thanks, You just need to make MDXRemote generic, let me know when this is addressed.

[BRKalow]

https://github.com/hashicorp/next-mdx-remote/releases/tag/v4.4.1

Thanks for the report!