I am using Vite + MDX with this plugin. It works fine. But refresh is slow. Not like HMR but a page refresh.

Then I found this vitejs/vite#4583

Frontmatter add named exports to MDX:

export const title = 'My Title';

export default function MDX() { ... }

The named export title will break HMR, meaning that whenever I modify a MDX file, the page will refresh instead of hot module replacement.

To solve the issue, I think it is better to generate code without named exports:

function MDX() { ... }

MDX.title = 'My Title';

export default MDX;

Using this plugin with a name lead me to believe that there would always be such an identifier exported.
I think it would make sense to either use undefined or {} as the value when there is no YAML frontmatter in files in such cases

The package produces CJS exports type, but in package.json it has "type": "module".
So, I get this error when I try to import remark-mdx-frontmatter as ES module:

index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs"

Similar to vfile-matter.
This allows manual overrides per file for rehype-meta (and perhaps other future plugins that support inline configuration)

Hello,

I'm trying to get remark-mdx-frontmatter to work with vite-plugin-mdx, but the latter only seems to support remark-frontmatter 2, and remark-mdx-frontmatter only seems to support 3.0 according to its dev deps in package.json. I tried with a fork of the example from vite-plugin-mdx, but on 3.0 remark-frontmatter still ignores frontmatter and it shows up as part of the MDX React component rendering, and on 2.0 remark-frontmatter appears to parse and strip the frontmatter directly, but it's not actually made available in the module exports by react-mdx-frontmatter.

Any ideas?

Hello, when using this plugin, I cannot get the content of frontmatter with the default setup.

However, if I do:

remarkPlugins: [remarkFrontmatter, [remarkMdxFrontmatter, {name: 'matter'}]]

I can get the content by file.matter. the custom name can be anything except for frontMatter (I'll get a undefined object)

I think this might be a bug.

See discussion here: https://stackoverflow.com/a/76962139/5737534

Same as remcohaszing/rehype-mdx-title#1

I attempted to utilize the example, and it just doesn't seem to output anything.

package.json

{
  "dependencies": {
    "@mdx-js/mdx": "^3.0.0",
    "remark-frontmatter": "^5.0.0",
    "remark-mdx-frontmatter": "^4.0.0"
  },
  "name": "posts",
  "version": "1.0.0",
  "main": "index.mjs",
  "devDependencies": {},
  "scripts": {
    "start": "node index.mjs"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

example.mdx

---
hello: frontmatter
---

Rest of document

index.mjs

import { readFile } from 'node:fs/promises'

import { compile } from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'

const { contents } = await compile(await readFile('example.mdx'), {
  jsx: true,
  remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter]
})
console.log(contents)

This is all essentially all copied and pasted from the example in the README. Unfortunately when executing the script, I don't receive any output whatsoever:

[user@box:~/JS/posts]$ npm start

> [email protected] start
> node index.mjs

undefined
[user@box:~/JS/posts]$ 

If I avoid destructuring contents, I can see I do get back a VFile:

[corte@rockbox:~/JS/posts]$ npm start

> [email protected] start
> node index.mjs

VFile {
  cwd: '/home/corte/JS/posts',
  data: {},
  history: [],
  messages: [],
  value: '/*@jsxRuntime automatic @jsxImportSource react*/\n' +
    'export const frontmatter = {\n' +
    '  "hello": "frontmatter"\n' +
    '};\n' +
    'function _createMdxContent(props) {\n' +
    '  const _components = {\n' +
    '    p: "p",\n' +
    '    ...props.components\n' +
    '  };\n' +
    '  return <_components.p>{"Rest of document"}</_components.p>;\n' +
    '}\n' +
    'export default function MDXContent(props = {}) {\n' +
    '  const {wrapper: MDXLayout} = props.components || ({});\n' +
    '  return MDXLayout ? <MDXLayout {...props}><_createMdxContent {...props} /></MDXLayout> : _createMdxContent(props);\n' +
    '}\n',
  map: undefined
}

Any thoughts?

Can not work with @mdx-js/mdx @mdx-js/rollup 2.1.1 .

frontmatter not export.

"dependencies": {
  "@mdx-js/mdx": "^2.1.1",
  "@mdx-js/rollup": "^2.1.1",
  "remark-frontmatter": "^4.0.1",
  "remark-mdx-frontmatter": "^1.1.1",
}

Next.js' documentation explicitly mentions remark-frontmatter on their page to set up mdx-support in Next.js, but they aren't explaining how the generated exports can be used.

I'm not too deep into how remark-plugins work. Do you now how it works? If so, can it be explained simply?

If this is something you would be interested in, I could make two PRs to enhance both this repositories README.md and the Next.js docs. This wouldn't only help me out with what I currently want to do, but also potentially advertise this plugin to a bigger audience.

Not sure whether this is in scope for this plugin - feel free to close if so.

I'm hoping to use this plugin with Next.js so that I can insert a header component using the frontmatter content. I think I currently can't access it from _app.tsx, where this is currently rendered. I could access it by adding something to every .mdx file, but this adds overhead to writing pages that I want to avoid.

To fix this, I was hoping this plugin could add it to the component itself, e.g. so rather than:

export const frontmatter = {
  hello: 'frontmatter'
}

export default function MDXContent() {
  return <p>Rest of document</p>
}

It outputs:

export default function MDXContent() {
  return <p>Rest of document</p>
}

MDXContent.frontmatter = {
  hello: 'frontmatter'
}

This is somewhat similar to what's described in https://www.josephrex.me/frontmatter-with-nextjs-and-mdx/ - although the actual component would be in _app.tsx.

This is roughly what I had in mind for my _app.tsx:

import '../styles/globals.css';
import type { AppProps } from 'next/app';

const App: React.FC<AppProps> = ({ Component, pageProps }: AppProps) => {
  if (Component.displayName === 'MDXContent') {
    return (
      <>
        <Header frontmatter={Component.frontmattter} />
        <div className="max-w-sm md:max-w-2xl mx-auto px-8 py-12 md:my-24 prose animate-fade-up">
          <Component {...pageProps} />
        </div>
      </>
    );
  }

  return <Component {...pageProps} />;
};

export default App;