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

Question

我想用 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在抱怨什么，当我写反应组件然后将它们导入其他地方时，我总是使用JSX.Element作为功能组件的return类型。如前所述，下一个构建工作正常。

到目前为止我尝试过的：

在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

感谢您的帮助！

Answer 1

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

模块声明应如下所示：

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

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

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

typescript

reactjs

next.js

mdxjs