How to import contents and data into my mdx documents

[khalilcodes]

Is there a way to directly import components in the mdx files ? Could not find anything related in the docs but looking at issue #266 it seems like import statements are supported. Unfortunately, I haven't been able to get this working. Please see below for more info about the error and what works.

The Error

when importing a component in a markdown file like index.mdx, it throws an error - unexpected "<"

For example the import statement as below:

import { Button } from "../components/Button"

gives the following error:

 > ../../templates/default/components/Button.js:14:4: error: Unexpected "<"
    14 │     <Link href={href}>
       ╵     ^

Error: Found 1 problems in 1 documents.

 └── Encountered unexpected errors while processing of 1 documents. This is possibly a bug in Contentlayer. Please open an issue.

     • "index.md": UnexpectedMDXError: Error: Build failed with 1 error:
     ../../templates/default/components/Button.js:14:4: error: Unexpected "<"


SourceFetchDataError: {
  "_tag": "HandledFetchDataError"
}

But this works

If the return statement of the component is a string, then it renders without any errors.

for example if the following is the component:

export function Button () {
  return "This is a button component"
}

and we import it in md like below:

[schickling]

Thanks for opening this issue. Can you please provide a reproduction repo with instructions how to reproduce the problem you're experiencing? Thank you!

[khalilcodes]

Hey @schickling Thanks for the reply.

Project repo

The repo can be found here - https://github.com/flowershow/flowershow
This repo has a template folder templates/default which is a Nextjs project and it is where contentlayer is setup.

It can be run by doing the following:

cd templates/default
npm install
npm run dev

Within templates/default is the content folder which is the contentDirPath in contentlayer.config.js.

Also note that the content directory is symlinked to site/content which lives at the root of the repo.

Related to our issue

I have setup test pages and test components that include a working component and another one that reproduces the error.

Pages

There are two test pages which can be found at:

1. templates/default/content/test/page-1.md

   • This is a page with a working component <Test />

2. templates/default/content/test/page-2.md

   • This is a page with the error component <Button></Button>
   • Note that I have commented this out as all the pages fail to build. After doing npm run dev you can uncomment them and see the error reproduced.

Components

The components can be found at templates/default/components/ directory. There are two test components I have created to reproduce the error which are as follows:

1. Test.js This is the component that works when imported in page-1.md
2. Button.js This is the component that throws the error when imported in page-2.md. The button component basically is a Nextjs <Link> component but I have tried with other elements as well eg. <div>.

Thanks again for looking into this and appreciate your help!

[schickling]

Thanks for the further information @khalilcodes. I've taken a brief look but couldn't yet identify the problem. I suspect this to be rather a problem in your project than a problem with Contentlayer. As a first step I'd suggest using the .tsx or .jsx extension for JSX files - this might otherwise confuse various parts of the stack.

Also feel free to join the Contentlayer discord where some community members might be able to help you.

[olayway]

As a first step I'd suggest using the .tsx or .jsx extension for JSX files - this might otherwise confuse various parts of the stack.

Thank you so much for your help, @schickling 🌻! We've changed .js files to .jsx (with @khalilcodes) and it worked 🎊!