I am working on a Next.js application where I am trying to fetch content from a database, parse it into MDX format, and render it on a page. However, I am consistently encountering errors, and it's difficult to pinpoint which file or step is causing the issue. This is the error.

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

Here’s a brief overview of my setup:

• I fetch content stored in the database.
• The content is in Markdown/MDX format.
• I attempt to parse and render it dynamically in a Next.js page using MDX integration.

This is mdx-components.tsx file.

'use client'

import { useMemo } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { cn } from '@/lib/utils'

const CustomLink = (props: any) => {
  const href = props.href

  if (href.startsWith('/')) {
    return (
      <Link href={href} {...props}>
        {props.children}
      </Link>
    )
  }

  if (href.startsWith('#')) {
    return <a {...props} />
  }

  return <a target="_blank" rel="noopener noreferrer" {...props} />
}

const CustomImage = ({ src, alt, ...props }: any) => {
  return (
    <div className="relative h-[300px] w-full my-4">
      <Image
        src={src}
        alt={alt}
        fill
        className="object-cover rounded-lg"
        {...props}
      />
    </div>
  )
}

const CustomPre = ({ children, className, ...props }: any) => {
  return (
    <pre className={cn('p-4 rounded-lg overflow-x-auto', className)} {...props}>
      {children}
    </pre>
  )
}

export const components = {
  a: CustomLink,
  img: CustomImage,
  pre: CustomPre,
  // Add more custom components as needed
} 

This is my MDXContent.tsx file.

import { MDXRemote } from 'next-mdx-remote'
import { components } from './mdx/mdx-components'

interface MDXContentProps {
  children: any // MDX content
}

export function MDXContent({ children }: MDXContentProps) {
  return (
    <MDXRemote
      {...children}
      components={components}
    />
  )
} 

I suspect the issue might be related to how MDX is integrated into the Next.js application. Despite trying several solutions, including those provided here, the problem persists.

As I am new to both Next.js and MDX, I might be missing something obvious.

What I’ve Tried:

• Verified that the database fetch logic is working and the content is retrieved correctly.
• Tried various MDX parsing solutions for Next.js.

Additional Details:

• The content in the database includes basic headings, text, and lists (for now) written in MDX.
• "next-mdx-remote": "^4.4.1", "@next/mdx": "^15.0.3", "next": "14.2.16"

How can I debug this issue effectively? Are there best practices or specific configurations for integrating MDX with dynamic database content in Next.js?

Any guidance or troubleshooting tips would be greatly appreciated!