Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

relative imports of MDX assets not work #387

Closed
shifenhutu opened this issue Feb 26, 2023 · 2 comments
Closed

relative imports of MDX assets not work #387

shifenhutu opened this issue Feb 26, 2023 · 2 comments
Labels
duplicate This issue or pull request already exists

Comments

@shifenhutu
Copy link

shifenhutu commented Feb 26, 2023

sorry my english is not good

issue info

my issue like this #266

image

i want to import the C1 component in the index.mdx

but it not work

error info

image

i open the url http://localhost:3000/posts/a22 , i have see nothing

my code

here is my code https://github.com/hu-tu-yi-shi/tmp-contentlayer-bug

can you help me , thank you very much

@nkilm
Copy link
Contributor

nkilm commented Feb 26, 2023

@hu-tu-yi-shi Generally we don't import & use the components that way. We use useMDXComponent hook to process the .mdx files and use custom components.

Example

// https://www.contentlayer.dev/docs/sources/files/mdx#usage-from-nextjs

import React from 'react'
import { allPosts, type Post } from 'contentlayer/generated'
import { useMDXComponent } from 'next-contentlayer/hooks'

export const getStaticProps = () => {
  const post = allPosts[0]
  return { props: { post } }
}

const MyButton: React.FC = () => <button>Click me</button>

const Page: React.FC<{ post }> = ({ post }) => {
  const MDXContent = useMDXComponent(post.body.code)
  
  return (
    <div>
      {/* Some code ... */}
		// MyButton is the custom component which can be used in .mdx file
      <MDXContent components={{ MyButton }} />
    </div>
  )
}

export default Page

@shifenhutu
Copy link
Author

same #11

@schickling schickling added the duplicate This issue or pull request already exists label Mar 25, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
duplicate This issue or pull request already exists
Projects
None yet
Development

No branches or pull requests

3 participants