Parse error on YAML headers

[cdfa]

Hi, I want to use this plugin for linting my Docz documentation written in MDX, but the plugin seems unable to parse the YAML headers used for configuration.

Example:

---
name: FollowReveal
route: /follow-reveal
---

# FollowReveal
...

Error:

1:3  error  Parsing error: Invalid left-hand side in prefix operation
> 1 | ---
    |   ^
  2 | name: FollowReveal
  3 | route: /follow-reveal
  4 | ---

[JounQin]

Thanks for reporting, I'll check as soon as possible.

[JounQin]

@cdfa I can not reproduce this error, can you try to upgrade you eslint version first? If it still throws error, please provide a runnable reproduction, so I can help to check.

[cdfa]

I updated eslint to 6.1.0, but I'm still having the same issue. I created a branch so you can view it yourself. You can also see the error on CircleCi here

Steps to reproduce:

• Clone the repo: git clone --single-branch --branch feature/mdx-lint cdfa/react-turn-reveal
• Install dependencies (I use PNPM, because reasons noted in the Contributing.md, but for this case I think npm gives the same results): pnpm i
• Run eslint: npm run lint:mdx:eslint

I seem to get different parse errors depending on whether I put "extends": ["plugin:@rxts/mdx/recommended"] in an override or in the global extends field.

[JounQin]

Thanks for reproduction, I'll take a look A.S.A.P. .

[JounQin]

@cdfa You need to pass a custom parser, because the ast has been transformed by other parsers/plugins:

{
  "files": ["*.mdx"],
  "extends": ["plugin:@rxts/mdx/recommended"],
  "parserOptions": {
    "parser": "babel-eslint"
  }
}

---

However, there still is an error:

/Users/JounQin/Workspaces/GitHub/react-turn-reveal/index.mdx
  6:3  error  Parsing error: Unexpected token

> 1 | <!-- markdownlint-disable MD041 -->
    | ^

✖ 1 problem (1 error, 0 warnings)

I will fix it tonight.

[cdfa]

Ah great to learn the root cause! Thank you for your quick work!

[JounQin]

@cdfa Please try v0.3.1

Sorry, it is still buggy for:

<Playground style={{ display: "flex", justifyContent: "center" }}>
  {() => {
    const perspective = 400;
    return (
      <div style={{ position: "relative", perspective: perspective + "px" }}>
        <FollowReveal perspective={perspective}>
          <Front>More info</Front>
        </FollowReveal>
        <PlaceHolderImage />
      </div>
    );
  }}
</Playground>

Wait for a while.