CODEWITHSUNDEEP
reactjstypescriptnext.jsmdxjs
feO2x
feO2x

Reputation: 5728

VS Code shows 'JSX element type 'MdxBlogPost' does not have any construct or call signatures.ts(2604)' when importing an MDX file in NextJS

I want to setup a website with NextJS, TypeScript and mdx-js. I used yarn create next-app to setup the project, then added typescript and mdx-js. I created a simple MDX file and imported it in index.tsx. When I run yarn dev, the projects builds just fine and I can see the results in the browser.

As the structure of MDX files is not understood by the TS compiler initially, I created a global.d.ts file that tells that the default export of a loaded MDX file provides a JSX.Element:

declare module '*.mdx' {
    declare const component: JSX.Element;
    export default component;
}

However, VS Code shows error ts2604 in the editor when I want to render the imported component in index.tsx:

ts2604 when rendering component

I really don't understand what VS is complaining about, when I write react components and later import them elsewhere, I always use JSX.Element as the return type of a function component. And as stated before, next builds work just fine.

What I have tried so far:

How should a proper TS module declaration look like for MDX files? You can find an MCVE for this question at https://github.com/feO2x/nextjs-ts-mdx

Thank you for your help!

Upvotes: 1

Views: 424

Answers (1)

feO2x
feO2x

Reputation: 5728

So as Ajeet Shah said in the comments, my error was to use JSX.Element instead of React.ComponentType.

The module declaration should look like this:

declare module '*.mdx' {
    import React from 'react';
    declare const component: React.ComponentType;
    export default component;
}

Upvotes: 0

Related Questions