How to expose meta/frontmatter in MDXProvider?

[omidantilong]

Hello! Me again.

In the context of Next.js -- say I have some mdx files which contain metadata, either in the form of frontmatter or an export const meta - is there a way to access these values when using MDXProvider in React?

<main>
  <MDXProvider
    components={{
      img: ({ alt, src }) => <Image alt={alt} src={src} />,
      wrapper: ({ components, ...rest }) => {
        console.log({ ...rest }); // <-- I had hoped to be able to see the meta data in here
        return <Layout {...rest} />;
      },
    }}
  >
    {children}
  </MDXProvider>
</main>

The Layout component that is returned from the wrapper function takes two parameters, meta and children. I can import that component into the mdx and export it as a local wrapper, and everything functions as expected. But I'm basically trying to avoid needing to add these lines to every file:

import { Layout } from "components/Layout";
export default function Page({ children }) {
  return <Layout meta={meta}>{children}</Layout>;
}

Thanks! <3

[wooorm]

Things exported from a file, are not passed to the component.
It defeats the purpose of ESM, and tree-shaking, to keep track of everything, and pass everything around.

If you want, you can access exported things from outside MDX already:

import Content, {meta} from './path/to/file.mdx'
console.log(meta)

You can use this information:

import Content, {meta} from './path/to/file.mdx'
import Layout from './path/to/file.jsx'

<Layout>
  <h1>{meta.title}</h1>
  <Content />
</Layout>

Or, as you’re doing in your last example, make your own small wrapper.

[omidantilong]

Thanks for the info. That does make sense re tree-shaking etc.

However, in the context of Next.js where the mdx files themselves form the pages and do not get imported into a parent jsx/tsx file, I had hoped the exported meta / parsed frontmatter might be available to the provider in the same as the children prop.

This might be a naive assumption but it seems like, at this stage in the execution, the mdx has been evaluated -- because it allows the children (which is the parsed, compiled mdx) to be passed as a property into the components definition when defining a wrapper. It would be awesome if the meta could be exposed there too. I hope that made sense! :)

[wooorm]

In the context of Next.js you can change app.js, see https://github.com/orgs/mdx-js/discussions/2032#discussioncomment-2730793, #2040 (at L618), and the automatic solution linked in #2033.

[omidantilong]

Hey @wooorm / @ChristianMurphy

I have created a plugin specifically for this problem. It replaces the remark-mdx-frontmatter plugin and inserts an export function getStaticProps() {} in the compiled mdx with all your frontmatter in.

https://github.com/omidantilong/remark-mdx-next

Cheers

[omidantilong]

@remcohaszing ~30 seconds after posting this I discovered your https://github.com/remcohaszing/recma-nextjs-static-props 🙈

[remcohaszing]

No problem! I hope you had a fun and educational experience creating your own plugin 🙂

[omidantilong]

I definitely learned a lot about estree. Super interesting!