react Mdx renders even frontmatter data

[fiorins]

Hi, I'm new with mdx and I'm trying to render an mdx file in my React Vite app, but I noticed that it renders even the frontmatter metadata instead of hide them. I have a code like this, where I'm wrong ?

vite.config.ts :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import mdx from "@mdx-js/rollup";

export default defineConfig({
  plugins: [mdx(), react()],
  base: "/",
});

test-note.mdx :

---
title: Test Note
shortTitle: A shorter title
date: 1011-01-11
---

# Welcome to Note

_italic text_

This is the content of Note.

Note.tsx :

import TestNote from "../assets/notes/test-note.mdx";

export default function Note() {
  return (
    <div>
      <TestNote />
    </div>
  );
}

[ChristianMurphy]

Welcome @fiorins! 👋
I'd highly recommend reading the MDX documentation, there is a dedicated section on frontmatter which answers your question and more https://mdxjs.com/guides/frontmatter/

[fiorins]

Thanks a lot, I followed that guide and added the plugins
vite.config.ts :

export default defineConfig({
  plugins: [
    mdx({
      remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
    }),
    react(),
  ],
  base: "/",
});

to my vite config file, it ignores the data from the render but I can't figure out how can access to the data of the frontmatter (I didn't find any example on the web for Vite), cause if I edit my mdx file with a frontmatter variable it throws "Can't find variable X" (shortTitle in my case)
test-note.mdx :

---
title: Test Note
shortTitle: A shorter title
date: 1011-01-11
---

# Welcome to Note

_italic text_

This is the content of Note.

# {shortTitle}

and the same in a react component, it doesn't render the title variable
Note.tsx :

import TestNote from "../assets/notes/test-note.mdx";

export default function Note() {
  return (
    <div>
      {TestNote.title}
      <TestNote />
    </div>
  );
}

[wooorm]

See the example in the remark-mdx-frontmatter readme: https://github.com/remcohaszing/remark-mdx-frontmatter#usage. frontmatter.shortTitle.

and the same in a react component, it doesn't render the title variable

That is not how import/export works.
You are using a default import to get TestNote.
Named exports are not on that default export.
They are exports themselves.

import TestNote, {frontmatter} from "../assets/notes/test-note.mdx";

[fiorins]

See the example in the remark-mdx-frontmatter readme: https://github.com/remcohaszing/remark-mdx-frontmatter#usage. frontmatter.shortTitle.

and the same in a react component, it doesn't render the title variable

That is not how import/export works. You are using a default import to get TestNote. Named exports are not on that default export. They are exports themselves.

import TestNote, {frontmatter} from "../assets/notes/test-note.mdx";

Thank you, in the mdx file I managed to do it but into my react component the import throws the error:

Module '"*.mdx"' has no exported member 'frontmatter'. Did you mean to use 'import frontmatter from "*.mdx"' instead?

[wooorm]

Who “throws” an error? That sounds like a TypeScript build error?
Does it actually work, or not?

[fiorins]

Oh pardon, that's correct. It renders the variable but into my ide throws that error even I'm not sure why.

[wooorm]

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/mdx/index.d.ts