MDX not compiling when using React Component in mdx file

[Yusufzai]

Summary

I am using NextJS and MDX with next-mdx-remote to get my data and it successfully work but the only problem is whenever I try to import react components I get the following error

Error: Expected component CodeBlock to be defined: you likely forgot to import, pass, or provide it. It’s referenced in your code at 317:1-317:24

In short :

This Works -

---
title: 'First Blog Post'
author: 'Me'
publishDate: 'Nov 4th, 2023'
---

# This is our first post

Here is a regular paragraph

here is a list:

- Item one
- Item two
- Item three

## This is an h2 element

This Does Not -

---
title: 'First Blog Post'
author: 'Me'
publishDate: 'Nov 4th, 2023'
---

# This is our first post

Here is a regular paragraph

here is a list:

- Item one
- Item two
- Item three

<CodeBlock></CodeBlock>

## This is an h2 element

Below are the following files

1. index.js for MDX
   https://pastebin.com/5ZmCDtkf

2. articles/[slug]/page.js
   https://pastebin.com/X0tGqsip

3. package.json
   https://pastebin.com/iNCywNfK

4. mdx-components.js
   https://pastebin.com/U8Bn739q

Additional information

I am using NEXT JS 14.X

[ChristianMurphy]

Welcome @Yusufzai! 👋
Sorry you ran into confusion.

The file compiled fine, there error happened, as the error message implies, because you used a custom component without passing it in.
This isn't coming from MDX the language, but from the bundler/build tool you are using next-mdx-remote.
Some possible causes:

• You have incompatible versions of MDX in your package (next-mdx-remote does not support v3 yet support MDX v3 hashicorp/next-mdx-remote#419)
• You need to set the dynamic import setting "Expected component ... to be defined" for an inline component hashicorp/next-mdx-remote#417

If those don't work, you can get support for next-mdx-remote from the maintainers https://github.com/hashicorp/next-mdx-remote/issues