Are you able to share more of the code?

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?

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

[Gist] (https://gist.github.com/lucaprotelli/a188064e5d2678ffe46d48b6d322e89b)

Gist

mdx-components.tsx

GitHub Gist: instantly share code, notes, and snippets.

This is the structure of the project 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.

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

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

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:

1
import Badge from '../components/Badge
2

3
export function useMDXComponents() {
4
  return {
5
    Badge,
6
    // Add any other components you want to use in MDX here
7
  }
8
}

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

Thanks for jumping in, Josh! 😁

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.

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

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

https://github.com/lucaprotelli/portfolio/tree/mdx-components-test

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.

1
// /components/mdx.tsx
2

3
import { Badge } from "./badge"
4

5
let components = {
6
  h1: createHeading(1),
7
  h2: createHeading(2),
8
  h3: createHeading(3),
9
  h4: createHeading(4),
10
  h5: createHeading(5),
11
  h6: createHeading(6),
12
  Image: RoundedImage,
13
  a: CustomLink,
14
  code: Code,
15
  Table,
16
+ Badge,
17
}

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.

OMG, I understand now. Thank you very much