Read const meta / front matter from all mdx files in a directory

[michrome]

I've seen similar questions to this without clear replies, so the answer might be "you're doing it wrong" but here's what I am trying to achieve.

Given the mdx files in the same directory at the bottom of this post, how can I return an array of their meta data? e.g.

[
  { "title": "First", "published": true },
  { "title": "Second", "published": false },
  { "title": "Third", "published": true }
]

Why would I want this? I might use this data to show a list of published pages on my site.

Approach 1

This discussion suggests using a module import e.g. import { meta } from "./file1.mdx" but I don't think it can be used recursively on *.mdx files in a directory because the import statement would have to sit at the module level, not the function level.

Approach 2

Read the files using remark-mdx. This is what I'd like to do but I am unsure how access the get to the export values. Something like this:

const fs = require("fs");
const { join } = require("path");
const remark = require("remark");
const mdx = require("remark-mdx");

const file = fs.readFileSync(join(__dirname, "file1.mdx"), "utf8");
const contents = remark().use(mdx).parse(file);
console.log(contents);

outputs the contents, except the meta I want to read!

{
  "type": "root",
  "children": [
    { "type": "paragraph", "children": [Array], "position": [Object] },
    { "type": "paragraph", "children": [Array], "position": [Object] }
  ],
  "position": {
    "start": { "line": 1, "column": 1, "offset": 0 },
    "end": { "line": 4, "column": 1, "offset": 76 }
  }
}

Please point me in the right direction 😀

Files

// file1.mdx
export const meta = { title: "First", published: true };

My first content.

// file2.mdx
export const meta = { title: "Second", published: false };

My second content.

// file3.mdx
export const meta = { title: "First", published: true };

My third content.

[wooorm]

Hi Mike! This indeed seems to be a question that comes up a lot, so it might be good to answer this once and for ever.

But: it does depend a lot on the tools you are using. So maybe this question is more a question for Gatsby, Next, or another framework.
And it depends on what you actually want to do, so it might not be possible to have one answer.

We’re comparing two things here: frontmatter and import/exports.

Frontmatter is more close to markdown (but not specific to it: many files can have frontmatter. It’s actually more of a preprocessing step, and has more to do with YAML as it supports several “documents” in one file, where the common case is the first one being YAML the rest being arbitrary other data).

Import/exports has to do with JS, and relates to what MDX is: it takes an MDX document, and turns it into JavaScript. The output still has to be executed, similar to other JavaScript files.

So it depends: is the metadata about your posts static? Or is it dynamic? Does it need to be “in“ files or can it be in a JSON or whatever other data format in a different file?

If you’re going with frontmatter, it doesn’t really have anything to do with MDX:

• Read all your blog post files.
• Get their frontmatter
• Parse it as yaml
• Do stuff with it

When going with import/exports, it’s a somewhat similar task

• Compile all files from the MDX format to JS
• Import the meta the compiled JS files export
• Do stuff with it

[realfresh]

Thank you so much, I was ripping my brains out, didn't realise it was so simple

[sebastienbarre]

Maybe I'm missing something, but I don't quite understand how import() would work on a .mdx file -- this is MDX, not Javascript.

And sure enough, it doesn't for me: error - unhandledRejection: Error: Cannot find module
Do you maybe have a special loader for that type of file?

[wooorm]

MDX compiles to JS. So swapping in something else in your sentence, such as TS, should make it clearer: “I don’t quite understand how import() would work on a .ts file -- this is TypeScript, not JavaScript”.

See https://mdxjs.com/community/support/ on how to ask questions. Your error message is way too short and there’s no reproduction so I have no clue what you‘re doing.

Yes, there are different loader to load .mdx files. See Packages.

[omidantilong]

I also have this problem when trying to use the suggested const {meta} = await import(file.mdx)

Node errors with TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".mdx" for file.mdx

The readme for the node-loader specifically says its experimental and might break so I'm curious how others in this thread got this to "just work"? Cheers :)

[wooorm]

Folks use integrations: so webpack, rollup, esbuild, or the Node loader. Even though it’s experimental, it still works very well.