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

Question

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:

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:

adding import React from 'react' in index.tsx or in global.d.ts does not solve the problem.
changing the type to ReactNode (as e.g. done in this blog post) produces the same error in VS.
when I simply export default any; from global.d.ts, the error goes away obviously but I loose type support, which should not really be the goal.
of course, when adding / changing the d.ts file, I added it to tsconfig.json and restarted VS Code several times to be sure the TS language server is re-initialized properly.

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!

The correct type of React Components is `React.ComponentType` — Ajeet Shah, Mar 29 '21 at 06:19
That seems to work! Thank you so much! Need to learn more about the react typings. — feO2x, Mar 29 '21 at 06:22

score 0 · Accepted Answer · answered Mar 29 '21 at 07:14

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

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

1 Answers1