[▲ Vercel Community](/) · [Categories](/categories) · [Latest](/latest) · [Top](/top) · [Live](/live) [Help](/c/help/9) # Error during importing components in mdx file 288 views · 12 likes · 15 posts Luca Protelli (@lucaprotelli) · 2024-12-10 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 Josh Dunsterville (@neversitdull) · 2024-12-10 · ♥ 1 Are you able to share more of the code? Luca Protelli (@lucaprotelli) · 2024-12-10 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? Josh Dunsterville (@neversitdull) · 2024-12-10 · ♥ 2 Are you able to share the snippet of the mdx file here and the Badge component? or you can use [Gist](https://gist.github.com) Luca Protelli (@lucaprotelli) · 2024-12-10 [Gist] (https://gist.github.com/lucaprotelli/a188064e5d2678ffe46d48b6d322e89b) 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. Josh Dunsterville (@neversitdull) · 2024-12-10 · ♥ 1 Thanks for sharing. I think you just need to import the Badge after the frontmatter instead of before it. Luca Protelli (@lucaprotelli) · 2024-12-10 I already tried but it didn't work. I think I'm missing something important Josh Dunsterville (@neversitdull) · 2024-12-10 · ♥ 2 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](https://nextjs.org/docs/app/building-your-application/configuring/mdx#add-an-mdx-componentstsx-file) on this. Let me know if this works Pauline P. Narvas (@pawlean) · 2024-12-10 · ♥ 2 Thanks for jumping in, Josh! 😁 Luca Protelli (@lucaprotelli) · 2024-12-10 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. Luca Protelli (@lucaprotelli) · 2024-12-10 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. Josh Dunsterville (@neversitdull) · 2024-12-11 · ♥ 1 Yeah sure happy to take a look and see what might be happening. Luca Protelli (@lucaprotelli) · 2024-12-11 https://github.com/lucaprotelli/portfolio/tree/mdx-components-test Josh Dunsterville (@neversitdull) · 2024-12-11 · ♥ 1 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. Luca Protelli (@lucaprotelli) · 2024-12-11 · ♥ 2 OMG, I understand now. Thank you very much
