is it possible to import mdx into mdx now?

[deadcoder0904]

i searched for it & found #454

but i also found https://stackoverflow.com/questions/62780010/how-to-include-markdown-file-md-inside-mdx-file even though i'm getting an error:

✘ [ERROR] Could not resolve "./chapter1/index.mdx"

is it possible to import mdx into mdx?

my structure is as follows. this is inside _book folder:

.
├── chapter1
│   └── index.mdx
├── chapter2
│   └── index.mdx
├── cover.png
└── index.mdx

2 directories, 4 files

the root index.mdx imports chapter1/index.mdx & chapter2/index.mdx.

it isn't working for some reason. i have imported it in 2 different ways.

export { default as cover } from './cover.png'

import Chapter1 from './chapter1/index.mdx'
import Chapter2 from '@/_book/chapter2/index'

<Chapter1 />

this is good shit

<Chapter2 />

end of book

is it possible to use something like this? or is the rfc gonna be the solution to this & i'll have to wait?

[wooorm]

Yes, it should work. If it doesn’t, that’s likely due to your tooling setup.

[wooorm]

because if i remove them, it doesn't work. it gives me error:

Yes, you do need a parser. But it’s not markdown. So you don’t need remark-parse (the word “mark” comes from markdown).
It’s HTML. So you need rehype-parse (“hype” comes from HyperText). Please see: https://github.com/orgs/mdx-js/discussions/2147#discussioncomment-3823673.

i tried doing a separate

Don’t. Don‘t do another processor. We have a place to handle MDX -> HTML already, and that’s in mdx-loader. And we have a place for HTML (fragment) to whole HTML document, the const file = ... bit in my comments. Anything else is just duplicate work and makes your code slower and more complex than it needs to be.

remark-parse-frontmatter

If you don’t really understand how this plugin works, that’s fine. Because as I mentioned before, remark-mdx-frontmatter is the best solution in this case. Because you are dealing with MDX.

Can you clean your repo up, and try with remark-mdx-frontmatter instead?

[deadcoder0904]

i just cleaned it up & used remark-mdx-frontmatter & pushed the commit.

however, i still don't know how to get the frontmatter values in index.js?

i did search sourcegraph for code blocks on remark-mdx-frontmatter but they just all use it as plugins. nowhere i see the code to read frontmatter values.

am i right to use remark-mdx-frontmatter in mdx-loader.js or should it be in index.js?

[wooorm]

am i right to use remark-mdx-frontmatter in mdx-loader.js or should it be in index.js?

You are right to use remark-mdx-frontmatter in mdx-loader: it’s for MDX. Not for static HTML. The static HTML is in index.js! 👍

but they just all use it as plugins

And that’s fine. It is a plugin. Nothing else is needed to use it properly.

however, i still don't know how to get the frontmatter values in index.js?

How to get the values from frontmatter, is explained in the readme of remark-mdx-frontmatter. It explains that it creates export statements from frontmatter. These export statements are JavaScript. So the question is: how do you “get” things that are exported from a module?

Well, you are already “getting” something from the module:

import Content from './_book/index.mdx'

This code “gets” something that was exported from the module. With an import statement.

Sometimes, like you probably do now, I do not really know what a module exports. For that, I like to use:

import * as everything from '...'
console.log(everything)

That will print in your console what values are exported from something.

[deadcoder0904]

oh, this was a weird one.

i had to do it twice.

import Content from './_book/index.mdx'
import * as meta from './_book/index.mdx'

const processor = unified()
  .use(rehypeDocument, { title: meta.title }) // document should be after sanitize

thanks for all the help this week. couldn't have done it without you 🙏

[wooorm]

You can combine these:

import Content, * as meta from './_book/index.mdx'

Glad it works!! ✨ Thanks for your kind words!

[deadcoder0904]

the answer is yes & a sample demo → https://github.com/deadcoder0904/mdx-to-pdf-epub-mobi-using-unified/