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

deadcoder0904 · 2022-02-14T09:42:47Z

deadcoder0904
Feb 14, 2022

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.

Answered by ChristianMurphy

Feb 14, 2022

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

View full answer

wooorm · 2022-02-14T10:28:44Z

wooorm
Feb 14, 2022
Maintainer

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.

8 replies

wooorm Feb 14, 2022
Maintainer

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 Feb 14, 2022
Author

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 Feb 14, 2022
Author

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 Feb 14, 2022
Maintainer

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

deadcoder0904 Feb 14, 2022
Author

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

deadcoder0904 · 2022-02-14T11:54:43Z

deadcoder0904
Feb 14, 2022
Author

only doing MDXComponents as any works 🎉

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

2 replies

ChristianMurphy Feb 14, 2022
Maintainer

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 Feb 15, 2022
Author

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

ChristianMurphy · 2022-02-14T15:20:42Z

ChristianMurphy
Feb 14, 2022
Maintainer

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

3 replies

deadcoder0904 Feb 15, 2022
Author

@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 Feb 15, 2022
Maintainer

@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 Feb 15, 2022
Author

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 · 2023-11-17T09:28:08Z

zenera
Nov 17, 2023

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} />
}

4 replies

wooorm Nov 17, 2023
Maintainer

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

remcohaszing Nov 17, 2023
Maintainer

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 Nov 17, 2023
Maintainer

Or alternatively outdated @types/mdx.

wooorm Nov 17, 2023
Maintainer

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

zenera · 2023-11-17T12:14:05Z

zenera
Nov 17, 2023

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

$ npm ls @types/react
[email protected] /home/aaa/blog/monzy
├─┬ @mdx-js/[email protected]
│ └── @types/[email protected] deduped
├─┬ @types/[email protected]
│ └── @types/[email protected] deduped
└── @types/[email protected]

and npm packages as following:

$ npm ls
[email protected] /home/aaa/blog/monzy
├── @heroicons/[email protected]
├── @mdx-js/[email protected]
├── @mdx-js/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

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.

1 reply

remcohaszing Nov 17, 2023
Maintainer

This playground seems to work.

zenera · 2023-11-17T21:43:30Z

zenera
Nov 17, 2023

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 |

1 reply

zenera Nov 17, 2023

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 · 2023-11-18T00:01:46Z

zenera
Nov 18, 2023

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} />
}

0 replies

zenera · 2023-11-22T07:20:44Z

zenera
Nov 22, 2023

I've found type casting can be a workaround.

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

0 replies

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

This comment was marked as off-topic.

Sign in to view

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

Replies: 9 comments · 20 replies

wooorm Feb 14, 2022 Maintainer

wooorm Feb 14, 2022 Maintainer

deadcoder0904 Feb 14, 2022 Author

deadcoder0904 Feb 14, 2022 Author

wooorm Feb 14, 2022 Maintainer

deadcoder0904 Feb 14, 2022 Author

deadcoder0904 Feb 14, 2022 Author

ChristianMurphy Feb 14, 2022 Maintainer

deadcoder0904 Feb 15, 2022 Author

ChristianMurphy Feb 14, 2022 Maintainer

deadcoder0904 Feb 15, 2022 Author

ChristianMurphy Feb 15, 2022 Maintainer

deadcoder0904 Feb 15, 2022 Author

wooorm Nov 17, 2023 Maintainer

remcohaszing Nov 17, 2023 Maintainer

remcohaszing Nov 17, 2023 Maintainer

wooorm Nov 17, 2023 Maintainer

remcohaszing Nov 17, 2023 Maintainer

This comment was marked as off-topic.

This comment was marked as off-topic.

Replies: 9 comments 20 replies

wooorm
Feb 14, 2022
Maintainer

wooorm Feb 14, 2022
Maintainer

deadcoder0904 Feb 14, 2022
Author

deadcoder0904 Feb 14, 2022
Author

wooorm Feb 14, 2022
Maintainer

deadcoder0904 Feb 14, 2022
Author

deadcoder0904
Feb 14, 2022
Author

ChristianMurphy Feb 14, 2022
Maintainer

deadcoder0904 Feb 15, 2022
Author

ChristianMurphy
Feb 14, 2022
Maintainer

deadcoder0904 Feb 15, 2022
Author

ChristianMurphy Feb 15, 2022
Maintainer

deadcoder0904 Feb 15, 2022
Author

wooorm Nov 17, 2023
Maintainer

remcohaszing Nov 17, 2023
Maintainer

remcohaszing Nov 17, 2023
Maintainer

wooorm Nov 17, 2023
Maintainer

remcohaszing Nov 17, 2023
Maintainer