Property does not exist on type '{ props: { readonly components?: {} | undefined; }; }' .ts-plugin(2339)

[andromidasj]

I'm exporting the MDXContent function using very similar code to what's given in the docs. Everything is working and rendering as expected, but in VSCode I'm getting the following typescript error when using a React component in a .mdx file:

Property 'Callout' does not exist on type '{ props: { readonly components?: {} | undefined; }; }'. ts-plugin(2339)

Here's my mdx-components.tsx file:

import * as runtime from "react/jsx-runtime";
import Callout from "./Callout";
import CustomPre from "./CustomPre";

const sharedComponents = {
  Callout,
  pre: (props: { children: { props: { children: string } } }) => (
    <CustomPre text={props.children.props.children} {...props} />
  ),
};

const useMDXComponent = (code: string) => {
  const fn = new Function(code);
  return fn({ ...runtime }).default;
};

interface MDXProps {
  code: string;
  components?: Record<string, React.ComponentType>;
}

export function MDXContent({ code, components }: MDXProps) {
  const Component = useMDXComponent(code);
  return <Component components={{ ...sharedComponents, ...components }} />;
}

Here's my Callout component, if it helps:

import { cn } from "@/lib/utils";

type Props = {
  text: string;
  type?: "default" | "warning" | "danger";
  className?: string;
};

export default function Callout({ text, type, className, ...props }: Props) {
  return (
    <div
      className={cn(
        "my-6 w-full items-start rounded-md border border-l-8 bg-slate-900 p-6 dark:max-w-none",
        {
          "border-red-400/25 bg-red-900/50": type === "danger",
          "border-white/25 bg-amber-300/30": type === "warning",
        },
        className,
      )}
      {...props}
    >
      {text}
    </div>
  );
}

I've tried importing the component within the .mdx file which removed the error, but then the page completely failed to load since importing directly is not supported as shown in the docs. How can I get VSCode to be happy with just using the component in the .mdx file and not show an error?

[zce]

I don't know what method you use.

Here is a little advice:

https://github.com/mdx-js/mdx-analyzer#typescript

Maybe you can use global d.ts.

I will close this issue as it has nothing to do with Velite itself.