How do I read only .mdx exports without parsing the mdx itself?
December 31, 2019 at 8:49pmHow do I read only .mdx exports without parsing the mdx itself?
December 31, 2019 at 8:49pmUsing 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:
- 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?
- Next js has an MDX loader https://mdxjs.com/getting-started/next , is there something blocking the Next-MDX loader from being used?
- 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 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.