mdx-js
How to use forwardRef component with MDXProvider and keep TypeScript happy? #2086
-
|
I'm having a difficult time making TypeScript happy while using a Here is a minimal example that does not type-check with TypeScript. // _app.tsx
const components = {
a: Link,
};
...
<MDXProvider components={components}>
...
</MDXProvider>// Link.tsx
type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(({ children, ...rest }, ref) => (
<a ref={ref} {...rest}>
{children}
</a>
));
Link.displayName = "Link";TypeScript throws the following error: I found 2 workarounds so far but both aren't pretty.
export const LinkWithoutRef: React.FC<React.PropsWithoutRef<Parameters<typeof Link>[0]>> = ({ children, ...rest }) => (
<Link {...rest}>{children}</Link>
);Am I missing some obvious solution here? I'd appreciate expert advice. |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 15 replies
-
|
To get types to work, it is important to use the same types on your end as are allowed in the MDX types. |
Beta Was this translation helpful? Give feedback.
-
|
I copied the code in the OP into the TypeScript playground and it just works. (link) I suspect you have multiple versions of The short-term solution for @igordanchenko is to use npm overrides or yarn resolutions for now. |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately, I do not see duplicate I'm using Next.js, and here is how I setup test sandbox: npx create-next-app mdxjs-test --typescript
yarn add @next/mdx @mdx-js/react @mdx-js/loader |
Beta Was this translation helpful? Give feedback.
-
|
@remcohaszing, thank you for looking into this. I'm still unclear why the TS playground doesn't show any errors, but the same error occurs in real-life Next.js and CRA projects. For the time being, I ended up just type-casting to the type MDXProvider expects to receive. const components = {
a: Link as React.FC<JSX.IntrinsicElements['a']>
} |
Beta Was this translation helpful? Give feedback.
-
|
I don’t know why it works in the TypeScript playground, but not in your example. My guess is the playground uses an outdated version of TypeScript. Anyway, I did manage to reproduce the issue. MDX uses framework agnostic JSX types. This depends on the I think this solution by @igordanchenko is the best one available: const components = {
a: Link as React.FC<JSX.IntrinsicElements['a']>
}We could make the following change to - type FunctionComponent<Props> = (props: Props) => JSX.Element | null;
+ type FunctionComponent<Props> = (props: Omit<Props, 'ref'>) => JSX.Element | null; |
Beta Was this translation helpful? Give feedback.
-
|
Isn’t it more of a bug with |
Beta Was this translation helpful? Give feedback.
-
The workaround doesn't work now? I got this error: The only way I got it to ignore is to use MDX's own type definition for a function component. |
Beta Was this translation helpful? Give feedback.
-
|
@schardev, here is my current workaround: import * as React from "react";
import type { FunctionComponent, MDXComponents } from "mdx/types";
const components: MDXComponents = {
a: Link as FunctionComponent<React.JSX.IntrinsicElements["a"]>,
}; |
Beta Was this translation helpful? Give feedback.
-
|
This is exactly what I'm using now. |
Beta Was this translation helpful? Give feedback.
-
|
I think this is caused by the introduction of My only note to this workaround is that the import * as React from "react";
import type { FunctionComponent, MDXComponents } from "mdx/types";
const components: MDXComponents = {
a: Link as FunctionComponent<React.ComponentPropsWithoutRef<"a">>,
}; |
Beta Was this translation helpful? Give feedback.
-
|
This was fixed in DefinitelyTyped/DefinitelyTyped#65703. |
Beta Was this translation helpful? Give feedback.
To get types to work, it is important to use the same types on your end as are allowed in the MDX types.
The MDX types are here: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/mdx/types.d.ts#L22, which expands to
JSX.IntrinsicElements['a'].