Types of property 'pre' are incompatible when using inside MDXComponents for generating RSS feed

[deadcoder0904]

I am trying to generate RSS feed using MDX. I have a bunch of custom MDX components:

import React from 'react'
import { getMDXComponent } from 'mdx-bundler/client'

import { Img } from '@/components/mdx/Img'
import { Pre } from '@/components/mdx/Pre'
import { TOC } from '@/components/mdx/TOC'
import { Sidenote } from '@/components/mdx/Sidenote'

export const MDXComponents = {
	pre: Pre,
	Img,
	TOC,
	Sidenote,
}

interface IMDXLayoutRenderer {
	mdxSource?: any
}

export const MDXLayoutRenderer = ({ mdxSource, ...rest }: IMDXLayoutRenderer): JSX.Element => {
	const MDXLayout = React.useMemo(() => getMDXComponent(mdxSource), [mdxSource])

	return <MDXLayout components={MDXComponents as any} {...rest} />
}

The Pre looks like:

import React from 'react'

import { CopyToClipboard } from '@/components/index'

interface IPre {
	children: React.ReactChild
	theme: string
	showLineNumbers: boolean
}

export const Pre = ({ children, theme, showLineNumbers, ...props }: IPre) => {
	return (
		<CopyToClipboard>
			<pre
				className={`px-4 py-3 overflow-x-auto rounded-lg font-jetbrains ${
					theme ? `${theme}-theme` : 'bg-syntaxBg'
				} ${showLineNumbers ? 'line-numbers' : ''}`}
			>
				{children}
			</pre>
		</CopyToClipboard>
	)
}

It's usage is like this in my generate-rss.ts file:

const mdx = (
	<MDXProvider components={MDXComponents}>
		<MDXLayoutRenderer mdxSource={code} />
	</MDXProvider>
)

I believe this is due to a mismatch in what pre's types looks like & my custom Pre component which uses CopyToClipboard component, which is a div with some svg & a button.

The complete error looks like:

Type '{ pre: ({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element; Img: ({ className, alt, caption, ...props }: { className: string; alt: string; caption: string; props: any; }) => JSX.Element; TOC: ({ toc, indentDepth }: ITOC) => JSX.Element; Sidenote: ({ type, body, title }: ISidenote) => JSX.Element; }' is not assignable to type 'MDXComponents'.
Type '{ pre: ({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element; Img: ({ className, alt, caption, ...props }: { className: string; alt: string; caption: string; props: any; }) => JSX.Element; TOC: ({ toc, indentDepth }: ITOC) => JSX.Element; Sidenote: ({ type, body, title }: ISidenote) => JSX.Element; }' is not assignable to type '{ a?: keyof IntrinsicElements | Component<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>> | undefined; ... 173 more ...; view?: keyof IntrinsicElements | ... 1 more ... | undefined; }'.
Types of property 'pre' are incompatible.
Type '({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element' is not assignable to type 'keyof IntrinsicElements | Component<DetailedHTMLProps<HTMLAttributes, HTMLPreElement>> | undefined'.
Type '({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element' is not assignable to type 'FunctionComponent<DetailedHTMLProps<HTMLAttributes, HTMLPreElement>>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'ClassAttributes & HTMLAttributes' is missing the following properties from type 'IPre': theme, showLineNumbersts(2322)
index.d.ts(50, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & Props'

How do I solve this?

This error is far too common whenever I use a Custom MDX Component. I'm using it with mdx-bundler but I haven't found a solution yet.

[wooorm]

The problem is explained in the error message:

Type 'ClassAttributes & HTMLAttributes' is missing the following properties from type 'IPre': theme, showLineNumbersts(2322)
index.d.ts(50, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & Props'

You can’t just say that theme is a string or showLineNumbers is a boolean in your types. It’s not true.

[wooorm]

pre is not a custom component. It’s an HTML element.

If you don’t want types, don’t use types.
TypeScript works on two sides: the giving side and the receiving side. You can’t just say you’re expecting a certain type and have it be okay. TypeScript then makes sure you also pass that type. And if not, you get an error (such as this one!). What’s happening here is that unknown is passed, and you can’t just say it’s a string!

theme and showLineNumbers are unknown, and you can test or throw in your code to make sure they are strings and booleans: https://www.typescriptlang.org/docs/handbook/2/narrowing.html

[deadcoder0904]

i'm not talking about little pre but big Pre. in my MDXComponents, i map pre to Pre (see the original post☝️)

yeah i get what you are saying but is there any solution to this? i couldn't find any searching on sourcegraph.

& i don't understand:

If you don’t want types, don’t use types.

bcz i write everything in ts. altho i know i can use js in ts, but types make it much easier all around.

[deadcoder0904]

and i know about type narrowing, so if i narrow it to string & boolean in Pre component, will it work?

i did narrow it like:

import React from 'react'

import { CopyToClipboard } from '@/components/index'

interface IPre {
	children: React.ReactChild
	theme: unknown
	showLineNumbers: unknown
}

export const Pre = ({ children, theme, showLineNumbers, ...props }: IPre) => {
	if (typeof theme === 'string' && typeof showLineNumbers === 'boolean') {
		return (
			<CopyToClipboard>
				<pre
					className={`px-4 py-3 overflow-x-auto rounded-lg font-jetbrains ${
						theme ? `${theme}-theme` : 'bg-syntaxBg'
					} ${showLineNumbers ? 'line-numbers' : ''}`}
				>
					{children}
				</pre>
			</CopyToClipboard>
		)
	}
	return <pre>{children}</pre>
}

[wooorm]

Something like that should work yes. I find that TypeScript always requires some fiddling to get right.

[deadcoder0904]

naah, that doesn't work. only MDXComponents as any works in the generateRSS function so i'm going with it :)

[deadcoder0904]

only doing MDXComponents as any works 🎉

const mdx = (
	<MDXProvider components={MDXComponents as any}>
		<MDXLayoutRenderer mdxSource={code} />
	</MDXProvider>
)

[ChristianMurphy]

This disables type checking, which somewhat defeats the purpose of using TypeScript, and hides the issue rather than resolving it.
See the alternative below #1940 (comment)

[deadcoder0904]

yeah ik but that's the only solution that works. your solution below doesn't work either 👍

[ChristianMurphy]

The issue is

interface IPre {
	children: React.ReactChild
	theme: string
	showLineNumbers: boolean
}

children of intrinsic elements is React.ReactElement not React.ReactChild
theme and showLineNumbers should also be marked as optional because they may not be passed.

interface IPre {
  children: React.ReactElement;
  theme?: string;
  showLineNumbers?: boolean;
}

Example in sandbox showing that it can be typed without any https://codesandbox.io/s/component-typing-example-dvc35?file=/src/App.tsx:73-170

[deadcoder0904]

@ChristianMurphy nope gives me error:

Type '{ pre: ({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element; Img: ({ className, alt, caption, ...props }: { className: string; alt: string; caption: string; props: any; }) => JSX.Element; TOC: ({ toc, indentDepth }: ITOC) => JSX.Element; Sidenote: ({ type, body, title }: ISidenote) => JSX.Element; }' is not assignable to type 'MDXComponents'.
Type '{ pre: ({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element; Img: ({ className, alt, caption, ...props }: { className: string; alt: string; caption: string; props: any; }) => JSX.Element; TOC: ({ toc, indentDepth }: ITOC) => JSX.Element; Sidenote: ({ type, body, title }: ISidenote) => JSX.Element; }' is not assignable to type '{ a?: keyof IntrinsicElements | Component<DetailedHTMLProps<AnchorHTMLAttributes, HTMLAnchorElement>> | undefined; ... 173 more ...; view?: keyof IntrinsicElements | ... 1 more ... | undefined; }'.
Types of property 'pre' are incompatible.
Type '({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element' is not assignable to type 'keyof IntrinsicElements | Component<DetailedHTMLProps<HTMLAttributes, HTMLPreElement>> | undefined'.
Type '({ children, theme, showLineNumbers, ...props }: IPre) => JSX.Element' is not assignable to type 'FunctionComponent<DetailedHTMLProps<HTMLAttributes, HTMLPreElement>>'.
Types of parameters '__0' and 'props' are incompatible.
Type 'DetailedHTMLProps<HTMLAttributes, HTMLPreElement>' is not assignable to type 'IPre'.
Types of property 'children' are incompatible.
Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'.
Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'.ts(2322)
index.d.ts(50, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & Props'

[ChristianMurphy]

@deadcoder0904 could you share a runnable example in codesandbox?
The error you are seeing seems to indicate you didn't modify the children type.

Types of property 'children' are incompatible.
Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor>'.

[deadcoder0904]

nope, i did change it. i would but it's too much work & codesandbox, stackblitz are too damn slow nowadays or buggy at times plus i'd have to replicate a lot of my setup which is not worth it bcz any works just fine :)

i don't care about fixing all of ts just that it should work fine :)

[zenera]

I'm having the same problem. I'm using next-mdx-remote with Typescript 5.2.2. If I set strict mode in tsconfig.json following error occurs.

Type '{ pre: ({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; Button: ({ text }: { text: string; }) => React.JSX.Element; }' is not assignable to type 'Readonly<MDXComponents> | MergeComponents | null | undefined'.
  Type '{ pre: ({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; Button: ({ text }: { text: string; }) => React.JSX.Element; }' is not assignable to type 'Readonly<MDXComponents>'.
    Types of property 'pre' are incompatible.
      Type '({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>' is not assignable to type 'Component<DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>> | undefined'.
        Type '({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>' is not assignable to type '(props: DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>) => ReactNode'.
          Types of parameters '__0' and 'props' are incompatible.
            Type 'DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>' is not assignable to type 'IPre'.
              Types of property 'children' are incompatible.
                Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
                  Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.

The error disappears if I disable strict mode or set @ts-expect-error directive as following:

export default function MDXContent({source}: {source: string}) {
  // @ts-expect-error Server Component
  return <MDXRemote source={source} components={comps} options={opts} />
}

[wooorm]

Sounds like you have a wrongly typed pre component.
Perhaps type it correctly?

[remcohaszing]

Actually this sounds like you have multiple versions of @types/react in your dependency tree. If not, maybe just outdated ones. You can check this using npm ls @types/react or yarn why @types/react.

[remcohaszing]

Or alternatively outdated @types/mdx.

[wooorm]

might be that next-mdx-remote is out of date

[zenera]

Thanks a lot. I've verified deduped @types/react package as following:

$ npm ls @types/react
monzy@0.1.0 /home/aaa/blog/monzy
├─┬ @mdx-js/react@3.0.0
│ └── @types/react@18.2.37 deduped
├─┬ @types/react-dom@18.2.15
│ └── @types/react@18.2.37 deduped
└── @types/react@18.2.37

and npm packages as following:

$ npm ls
monzy@0.1.0 /home/aaa/blog/monzy
├── @heroicons/react@2.0.18
├── @mdx-js/mdx@3.0.0
├── @mdx-js/react@3.0.0
├── @types/mdx@2.0.10
├── @types/node@20.9.0
├── @types/react-dom@18.2.15
├── @types/react@18.2.37
├── eslint-config-next@14.0.1
├── eslint@8.53.0
├── next@14.0.1
├── prism-react-renderer@2.2.0
├── react-dom@18.2.0
├── react@18.2.0
├── rehype-katex@7.0.0
├── remark-gfm@4.0.0
├── remark-math@6.0.0
├── sharp@0.32.6
└── typescript@5.2.2

Then, how can I resolve the problem?

Indeed I'm newbie in Javascript world. The next-mdx-remote package is not installed as a npm package due to version dependencies between packages. Instead I picked core parts of the sources. This resolves all the next-mdx-remote package related problems.

[remcohaszing]

This playground seems to work.

[zenera]

Thank you for your reply. I found the problem is caused by Next.js. It seems they ignoring tsconfig.json settings. The error persists on Visual Studio Code even if I changed the settings to "target": "ESNext" and ```"jsx":"react-jsx". For the infomaion:

$ npm run build

> monzy@0.1.0 build
> next build

   ▲ Next.js 14.0.1
   - Environments: .env

 ✓ Creating an optimized production build    
 ✓ Compiled successfully
   Linting and checking validity of types  ..
   We detected TypeScript in your project and reconfigured your tsconfig.json file for you. Strict-mode is set to false by default.
   The following mandatory changes were made to your tsconfig.json:

   	- jsx was set to preserve (next.js implements its own optimized jsx transform)

   Linting and checking validity of types  ..Failed to compile.

./app/components/MDXContent.tsx:32:37
Type error: Type '{ pre: ({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; Button: ({ text }: { text: string; }) => React.JSX.Element; }' is not assignable to type 'Readonly<MDXComponents> | MergeComponents | null | undefined'.
  Type '{ pre: ({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>; Button: ({ text }: { text: string; }) => React.JSX.Element; }' is not assignable to type 'Readonly<MDXComponents>'.
    Types of property 'pre' are incompatible.
      Type '({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>' is not assignable to type 'Component<DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>> | undefined'.
        Type '({ children, ...props }: IPre) => React.ReactElement<any, string | React.JSXElementConstructor<any>>' is not assignable to type '(props: DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>) => ReactNode'.
          Types of parameters '__0' and 'props' are incompatible.
            Type 'DetailedHTMLProps<HTMLAttributes<HTMLPreElement>, HTMLPreElement>' is not assignable to type 'IPre'.
              Types of property 'children' are incompatible.
                Type 'ReactNode' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
                  Type 'undefined' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.

  30 | export default function MDXContent({source}: {source: string}) {
  31 |   // cba@ts-expect-error Server Component
> 32 |   return <MDXRemote source={source} components={comps} options={opts} />
     |                                     ^
  33 | }
  34 |

[zenera]

Sorry for my inconveniences. I was missed that the typescripts is different for my use case. The build time error message is irrelevant to error message in Visual Studio Code. So there might be Typescript error unresolved for my case. The comps should accept HTML pre tag:

const comps = { pre: Pre];

[zenera]

Sorry again for my inconvenience. I realized my case should be concrete(I have to use CodeBlock component with HTML pre tag:

import { MDXRemote } from '@/app/lib/next-mdx-remote/rsc'
import CodeBlock from './CodeBlock';

interface CodeBlockProps {
  children: React.ReactElement;
}

const comps = { pre: CodeBlock };

export default function MDXContent({source}: {source: string}) {
  // ignore@ts-expect-error Server Component
  return <MDXRemote source={source} components={comps} options={opts} />
}

[zenera]

I've found type casting can be a workaround.

import { MDXComponents } from 'mdx/types';
const comps = { pre: CodeBlock, } as MDXComponents;