Spectrum is now read-only. Learn more about the decision in our official announcement.


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

December 31, 2019 at 8:49pm
The mdx community has a new home. This thread is preserved for historical purposes. The content of this conversation may be innaccurrate or out of date. Go to new community home →

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 , 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?
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.
To access the values without the runtime or webpack, use the AST It gives full access to the imports, exports, etc
You can play around and see what the output of the AST looks like at From what you are describing, it sounds like you'd want to walk the tree looking for export nodes And filter for the particular variable you are interested in.
Christian, this is totally awesome! Thanks for the info!