Frontmatter Rendered on Page

[shroommu]

I have the following React code rendering a .mdx file:

import styled from "styled-components";
import { MDXProvider } from "@mdx-js/react";

import { Header1, Header2, Paragraph } from "./styles";

const Container = styled.article``;

const components = {
  h1: Header1,
  h2: Header2,
  p: Paragraph,
};

export default function BlogPost({ children }) {
  return (
    <Container>
      <MDXProvider components={components}>{children}</MDXProvider>
    </Container>
  );
}

And the .mdx file is as follows:

---
title: "Building my Site, Part 1"
slug: "/building-my-site-part-1"
date: "09-14-2023"
excerpt: "Building a site from scratch is a fun adventure, and I'll tell you all about it in this multi-part blog series!"
---

# Hi! Here's the title!

## Here's a sub-title!

Here's some body text.

When I render the React component, it includes the frontmatter, which is not my expected or desired outcome:

What am I doing wrong here? I've tried several different configurations of the frontmatter and different frontmatter-related plugins, to no avail. I suspect it's something with the remark plugin configuration, but I'm very unclear on how I'm supposed to configure it? I'm using webpack; here is my webpack config (relevant section):

{
        test: /\.mdx?$/,
        use: [
          {
            loader: "@mdx-js/loader",
            /** @type {import('@mdx-js/loader').Options} */
            options: {
              remarkPlugins: [remarkFrontmatter, { type: "yaml", marker: "-" }],
            },
          },
        ],
      },

[ChristianMurphy]

Welcome @shroommu!
Sorry you ran into a spot of trouble, a couple thoughts:

1. You mention configuring webpack to load MDX files, but you don't appear to use the mdx loader to import Document from './path/file.mdx' anywhere. Are you using a different system such as Next to load the file into {children}?
   • If so be sure to configure that
   • If not, how are you using the webpack loader?
2. You probably don't need to use MDXProvider. If you are using the webpack or next loader, the document will be passed as a component to you, and that component has a components prop which can be used to add custom elements.

[shroommu]

Hm... Closer, maybe, but that config is giving me the same result.

I'm really at a loss for what to try next. I've read the documentation for MDX several times over, and I don't know if I'm just missing something or if what I'm trying to do is not possible with the project as I have it configured. I know CRA and MDX don't currently play nicely together, but I hesitate to dismantle everything in order to try something that might not work, either.

[ChristianMurphy]

Have you read through or tried https://mdxjs.com/guides/frontmatter/ yet? It looks like you probably want to do something with the content/yaml similar to this.

[shroommu]

I have, and I do, but it's not clear how to translate the examples on that page into something that will work with the webpack loader.

I may have to explore other options at this point. I've been pulling my hair out all day to do something that seems like it should be simple, but apparently isn't.

[shroommu]

WELL. Scratch that. Guess I finally pulled out the right hair.

Installed CRACO as recommended in the docs about CRA, downgraded remark-frontmatter to 3.0.0, and used this CRACO config file:

const { addAfterLoader, loaderByName } = require("@craco/craco");
const remarkFrontmatter = require("remark-frontmatter");

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      addAfterLoader(webpackConfig, loaderByName("babel-loader"), {
        test: /\.(md|mdx)$/,
        loader: require.resolve("@mdx-js/loader"),
        options: {
          providerImportSource: "@mdx-js/react",
          remarkPlugins: [remarkFrontmatter, { type: "yaml", marker: "-" }],
        },
      });

      return webpackConfig;
    },
  },
};

Now it works!

[ChristianMurphy]

Glad you got it working.
A fair warning, while CRA still works, it is for all intents and purposes deprecated by the React team reactjs/react.dev#5487 (comment).
If you are looking to create a single page app, Vite (which also has an MDX integration https://mdxjs.com/docs/getting-started/#vite) may be a better fit.
And if you'd like server side rendering support React has some recommendations https://react.dev/learn/start-a-new-react-project (all of which also have MDX integrations)