Error during importing components in mdx file

Help
1

Description of the Error:
I want to add a component in the mdx file. I’m using the blog starter kit and I don’t understand how to import a component in the post.mdx.

This is what happened:
Error: Expected component Badge to be defined: you likely forgot to import, pass, or provide it.
It’s referenced in your code at 44:1-47:3

I read the documentation but I don’t understand why. Can someone help me?

Thank you for your time

3

Are you able to share more of the code?

1 Like
4

I have a repository on GitHub, but the code with the issue hasn’t been pushed to the repository. Do you have any recommendations for sharing the code?

5

Are you able to share the snippet of the mdx file here and the Badge component? or you can use Gist

2 Likes
6

[Gist] (badge.tsx · GitHub)
This is the structure of the project

Screenshot 2024-12-10 at 19.33.53
Screenshot 2024-12-10 at 19.33.531022×1218 60.6 KB

I need to specify that the badge.tsx on the Gist is equal to mdx-components.tsx on my repo. I wanted to have a file where I can put the components that I made on the post mdx.

7

Thanks for sharing. I think you just need to import the Badge after the frontmatter instead of before it.

1 Like
8

I already tried but it didn’t work. I think I’m missing something important

9

Ah sorry I think I see the issue. In your mdx-components file you need to export the function useMDXComponents returning the list of your components.

So for structure I’d place your badge in its own component. This can live in your components folder

then import it into mdx-components.
eg:

import Badge from '../components/Badge

export function useMDXComponents() {
  return {
    Badge,
    // Add any other components you want to use in MDX here
  }
}

Here are the docs on this. Let me know if this works

2 Likes
10

Thanks for jumping in, Josh! :grin:

2 Likes
11

Thank you for your help but I don’t think it’s the answer. In the blog starter kit it is managed differently I think the mdx.

12

I think I need to understand better this topic about mdx in nextjs :grimacing:
If you prefer I can push the source code on github in a new branch so everyone can understand better.

13

Yeah sure happy to take a look and see what might be happening.

1 Like
14
15

Alright I think I figured it out and got it building locally. Not sure if this is from the template or not but it looks like you’re using a mdx.tsx component file, passing in CustomMDX, and exporting your custom components from there. To fix the error you’ll need to import badge.tsx and assign it to the components object.

// /components/mdx.tsx

import { Badge } from "./badge"

let components = {
  h1: createHeading(1),
  h2: createHeading(2),
  h3: createHeading(3),
  h4: createHeading(4),
  h5: createHeading(5),
  h6: createHeading(6),
  Image: RoundedImage,
  a: CustomLink,
  code: Code,
  Table,
+ Badge,
}

From here you can remove the mdx-components global file since you’re using a different approach. Again not sure if this is legacy from a template, but I’d eventually recommend using the mdx-components approach instead as it makes your components available to all MDX files automatically and is also how Next .js recommends.

Oh also you can remove the import from the post mdx file itself since your making the components available through the above approach.

1 Like
16

OMG, I understand now. Thank you very much

2 Likes
17

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.