kentcdodds/mdx-bundler

Error: Element type is invalid: expected a string (for built-in components)

web-programmer-here opened this issue · 1 comments

I am getting an error when rendering the MDX content using nextjs 13 and react 18.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I think the error is coming from here:

return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
export const MDXComponents = {
	Image,
	TOCInline,
	a: CustomLink,
	pre: Pre,
	wrapper: ({ components, layout, ...rest }) => {
		const Layout = require(`../layouts/${layout}`).default
		return <Layout {...rest} />
	},
}

export default function MDXLayoutRenderer({ layout, mdxSource, ...rest }) {
	const MDXLayout = useMemo(() => getMDXComponent(mdxSource), [mdxSource])

	return <>Test</>
        // error coming from this line
	//return <MDXLayout layout={layout} components={MDXComponents} {...rest} />
}
"next": "13.1.2",
"react": "18.2.0",
"esbuild": "^0.16.17",
"mdx-bundler": "^9.2.1",

I am not sure why I get this error. Thanks

Downgrade to next@12.3.4