menu
Channels
Team

How do I read only .mdx exports without parsing the mdx itself?

December 31, 2019 at 8:49pm

How do I read only .mdx exports without parsing the mdx itself?

December 31, 2019 at 8:49pm
Using nextjs static builds, and I need a way to specify what url paths to generate. To properly do pagination and archives, I need the metadata my mdx files export. The problem is, webpack isn't run on the build script itself, so I can't simply import the mdx files as I do on the client.
One alternative is to use frontmatter and use a custom loader to scrape it off before the mdx-loader gets it. But I'm trying to stick to the mdx way of doing things.
Any ideas?

January 1, 2020 at 3:59pm
A few questions:
  1. what are you trying to achieve here? Are you trying to get some metadata into a json file? are you using the metadata to structure generated file paths? something else?
  2. Next js has an MDX loader https://mdxjs.com/getting-started/next , is there something blocking the Next-MDX loader from being used?
  3. In the first paragraph you say you can't use the webpack mdx loader, in the second paragraph you mention you are using the webpack mdx-loader. Are there two pieces of software you are describing? Is that a typo?
  • reply
  • like
Here's the challenge: If I want to import an mdx file in client code, mdx-loader and next-mdx work fine. I can read any vars I export from the file. However, if I want to read that same mdx file in server code (specifically, exportPathMap), I don't have access to the webpack pipeline.
Why would I want to do this anyway? To generate static pagination and tag index pages. I can't do that without the metadata from my mdx files.
An mdx babel plugin would fit the bill, as it's easy enough to pipe my next.config.js through babel. Perhaps even something like /mdx + the current babel plugins, which might work, come to think of it.
The solution I'm currently running with (though which I don't prefer) is using yaml frontmatter rather than mdx exports. In client code, I just added an additional custom loader that converts the yaml to an mdx export. And in server code, I parse the files with grayMatter, keeping only the yaml metadata and dropping the actual mdx.
It works, but it's dirty, and I can't help but feel like there's a clean solution I simply haven't considered given that I'm new to the mdx ecosystem. It seems like a common use case given the popularity of static sites these days.
Edited
  • reply
  • like
To access the values without the runtime or webpack, use the AST https://mdxjs.com/advanced/ast It gives full access to the imports, exports, etc https://mdxjs.com/advanced/transform-content
You can play around and see what the output of the AST looks like at https://mdxjs.com/playground From what you are describing, it sounds like you'd want to walk the tree looking for export nodes https://github.com/syntax-tree/unist-util-visit And filter for the particular variable you are interested in.
  • reply
  • like
Christian, this is totally awesome! Thanks for the info!
  • reply
  • like