When I use MDXProvider in vue3,It throws error which is 'JSX element type 'MDXProvider' does not have any construct or call signatures'

[gtlab2023]

I use '@mdx-js/vue' in vue3,want to inject components in all mdxComponents,but It not works.Can anyone helps?

import { MDXProvider } from "@mdx-js/vue";
import { SlotsType, defineComponent } from "vue";
import { MDXComponents } from "mdx/types";
import { H1 } from "./Heading";
const module = defineComponent<
	object,
	Record<string, any>,
	string,
	SlotsType<{
		default: () => MDXComponents;
	}>
>(
	(props, { slots }) => {
		return () => {
			return <MDXProvider>{slots.default()}</MDXProvider>;
		};
	},
	{
		name: "CustomMdxProvider",
	},
);

export default module;

webpack configuaration belows:

{
      test: /\.mdx$/,
      use: [
	      // Babel is optional:
	      { loader: "babel-loader" },
	      {
		      loader: "@mdx-js/loader",
		      /** @type {import('@mdx-js/loader').Options} */
		      options: {
			      /* jsxImportSource: …, otherOptions… */
			      jsxImportSource: "vue",
			      providerImportSource: "@mdx-js/vue",
		      },
	      },
      ],
},

[so1ve]

Could you please share your tsconfig?

[gtlab2023]

of course

{
	"compilerOptions": {
                "target": "esnext",
		"module": "esnext",
		"moduleResolution": "node",
		"allowImportingTsExtensions": true,
		"emitDeclarationOnly": true,
		"resolveJsonModule": true,
		"allowJs": true,
		"allowSyntheticDefaultImports": true,
		"esModuleInterop": true,
		"forceConsistentCasingInFileNames": true,
		"strict": true,
		"alwaysStrict": true,
		"skipDefaultLibCheck": true,
		"skipLibCheck": true,
		"useDefineForClassFields": false,
		"experimentalDecorators": true,
		"isolatedModules": true,
		"removeComments": false,
		"lib": ["esnext", "dom"],
		"emitDeclarationOnly": true,
		"jsx": "preserve",
		"jsxImportSource": "vue"
	},
	"include": ["src/**/*", "test/**/*", "."],
	"exclude": ["node_modules", "public", "dist"],
	"ts-node": {
		"compilerOptions": {
			"module": "CommonJS"
		}
	}
}