Acorn parsing error in frontmatter

davidthor commented 1 year ago

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

v2.3.0

Link to runnable example

https://codesandbox.io/p/sandbox/quizzical-parm-8vnd52?file=/index.js

Steps to reproduce

I'm trying to use frontmatter to pass data from pages to a layout component, but am running into issues with the frontmatter contents. It seems like acorn is trying to parse the string frontmatter contents and it isn't liking some of the contents of my strings.

In my case, I'm trying to pass data for code blocks to put in a hero component. My frontmatter looks something like this:

---
title: My page title
hero:
  codeBlocks:
    - label: filename.hcl
      language: hcl
      code: |
        variable "region" {
          type = "string"
          description = "Region to put stuff in"
        }
---

With the above, I'm getting the error on the type = "string" line. It seems to be expecting a comma because the error goes away when I put one at the end of the line:

Could not parse expression with acorn: Unexpected content after expression

See the codesandbox link for more details

Expected behavior

I expected the frontmatter to be interpretted as a string and not error

Actual behavior

I get the error "Could not parse expression with acorn: Unexpected content after expression"

Runtime

Node v18

Package manager

npm v9

OS

macOS

Build and bundle tools

Gatsby

ChristianMurphy commented 1 year ago

@davidthor frontmatter is not a native part of markdown or mdx. It can be supported by adding a plugin, as documented at https://mdxjs.com/guides/frontmatter/ In addition for frontmatter to be valid, there cannot be spaces before the ---, there are in your example.

A working example of using frontmatter: https://codesandbox.io/p/sandbox/loving-bhaskara-p3rqg5

source

```js // ⚠️ Important! Please make sure the dependencies are up to date. import http from "node:http"; import * as runtime from "react/jsx-runtime"; import ReactDom from "react-dom/server"; import { evaluate } from "@mdx-js/mdx"; import remarkFrontmatter from "remark-frontmatter"; import remarkMdxFrontmatter from "remark-mdx-frontmatter"; http .createServer(async function (_, res) { const content = `--- title: My page title hero: codeBlocks: - label: filename.hcl language: hcl code: | variable "region" { type = "string" description = "Region to put stuff in" } --- See frontmatter`; const { default: Content } = await evaluate(content, { ...runtime, remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter], }); ReactDom.renderToNodeStream(Content()).pipe(res); }) .listen(8080); ```

davidthor commented 1 year ago

@davidthor frontmatter is not a native part of markdown or mdx. It can be supported by adding a plugin, as documented at https://mdxjs.com/guides/frontmatter/ In addition for frontmatter to be valid, there cannot be spaces before the ---, there are in your example.

Thanks @ChristianMurphy. Your example definitely made me think about where the problem may lie, and I suspect its in the implementation of the mdx plugin for gatsby because I'm still seeing it in the compiler there. They're using gray matter, and there's probably some double parsing going on as a result of the way they handle things. I'll move my question over there, and thanks for the quick reply!

mdx-js / mdx