VS Code 在 NextJS 中导入 MDX 文件时显示“JSX 元素类型‘MdxBlogPost’没有任何构造或调用 signatures.ts(2604)”

如何解决VS Code 在 NextJS 中导入 MDX 文件时显示“JSX 元素类型‘MdxBlogPost’没有任何构造或调用 signatures.ts(2604)”

我想用 NextJS、TypeScript 和 mdx-js 建立一个网站。我使用 yarn create next-app 来设置项目，然后添加了 typescript 和 mdx-js。我创建了一个简单的 MDX 文件并将其导入到 index.tsx 中。当我运行 yarn dev 时，项目构建得很好，我可以在浏览器中看到结果。

由于最初 TS 编译器不理解 MDX 文件的结构，因此我创建了一个 global.d.ts 文件，该文件告诉加载的 MDX 文件的默认导出提供了一个 JSX.Element：

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

但是，当我想在 index.tsx 中呈现导入的组件时，VS Code 在编辑器中显示错误 ts2604：

我真的不明白VS在抱怨什么，当我编写react组件然后将它们导入其他地方时，我总是使用JSX.Element作为函数组件的返回类型。如前所述，接下来的构建工作得很好。

到目前为止我尝试过的：

• 在 index.tsx 或 global.d.ts 中添加 import React from 'react' 不能解决问题。
• 将类型更改为 ReactNode（例如在 this blog post 中完成）会在 VS 中产生相同的错误。
• 当我从 global.d.ts 中简单地 export default any; 时，错误显然消失了，但我失去了类型支持，这不应该是真正的目标。
• 当然，在添加/更改 d.ts 文件时，我将其添加到 tsconfig.json 并重新启动 VS Code 几次以确保 TS 语言服务器重新初始化正确。

对于 MDX 文件，正确的 TS 模块声明应该是什么样的？您可以在 https://github.com/feO2x/nextjs-ts-mdx

找到此问题的 MCVE

感谢您的帮助！

解决方法

正如 Ajeet Shah 在评论中所说，我的错误是使用 JSX.Element 而不是 React.ComponentType。

模块声明应如下所示：

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