kentcdodds/mdx-bundler

Can't import react components

spcbfr opened this issue · 1 comments

spcbfr commented
  • mdx-bundler version: 9.0.1
  • node version: v16.17.0
  • npm version:8.15.0

Relevant code or config

export async function getPostData(id) {
  const fullPath = path.join(postsDirectory, `${id}.mdx`);
  const fileContents = fs.readFileSync(fullPath, 'utf8');

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents);

  const processedContent = await remark()
    .use(html)
    .process(matterResult.content);
  const contentHtml = processedContent.toString();
  // Combine the data with the id
  const {code, frontmatter} = await bundleMDX({
    source: fileContents,
  })
  return {
    id,
    code,
    frontmatter,
  };
}

What you did: tried to import a react component into my mdx file

What happened: I got this errror

The JSX syntax extension is not currently enabled

Reproduction repository: https://github.com/spcbfr/nextjs-blog go to an mdx file and try to import a react component from the components directory

spcbfr commented

Fixed, had to change the extension of the components from .js to .jsx

  • 👍1