enableCustomId of gatsby-remark-autolink-headers not working (MDX v2)

vrabe commented 2 years ago

Preliminary Checks

[X] This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
[X] This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

I tried to test #33116 bug with MDX v2 version of gatsby-plugin-mdx. But I encountered errors when I was starting develop server.

Reproduction Link

https://github.com/vrabe/gatsby-mdx-autoheader-bug

Steps to Reproduce

Install dependency
run gatsby develop

Expected Result

No error.

Actual Result

ERROR #gatsby-plugin-mdx_10001  PLUGIN

Failed to compile the file "/home/user/program/gatsby-mdx-autoheader-bug/src/pages/index.mdx". Original error message:

Could not parse expression with acorn: Unexpected character '#'

 ERROR 

Module build failed (from ./node_modules/gatsby/dist/utils/babel-loader.js):
SyntaxError: /home/user/program/gatsby-mdx-autoheader-bug/src/pages/index.mdx: Unexpected token (1:0)

> 1 | # Header {#header}
    | ^
  2 |
  3 | ## SubHeader {#subheader}
  4 |

Environment

System:
    OS: Linux 5.18 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4440 CPU @ 3.10GHz
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.4.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.11.0 - /usr/bin/npm
  Languages:
    Python: 3.10.5 - /usr/bin/python
  Browsers:
    Firefox: 102.0
  npmPackages:
    gatsby: 4.20.0-mdxv4-rc.65 => 4.20.0-mdxv4-rc.65+91ed769ab0 
    gatsby-plugin-mdx: 4.0.0-rc.3 => 4.0.0-rc.3 
    gatsby-remark-autolink-headers: 5.20.0-mdxv4-rc.65 => 5.20.0-mdxv4-rc.65+91ed769ab0 
    gatsby-source-filesystem: ^4.19.0 => 4.19.0

Config Flags

No response

LekoArts commented 2 years ago

Hi, thanks for the issue!

I see that your issue is about a specific experiment/flag we currently have. We collect any feedback (bug reports, feature requests, questions, etc.) inside a respective discussion in the Umbrella Discussions category.

Please direct your feedback here: https://github.com/gatsbyjs/gatsby/discussions/25068

Thanks!

shirly-chen-awx commented 1 year ago

@vrabe hey, I met the same issue with you, how did you resolve it?

vrabe commented 1 year ago

@shirly-chen-awx Gatsby doesn't want to support it. You can check this doc.

Please note: The enableCustomId option is not compatible with gatsby-plugin-mdx as the syntax is invalid in MDX v2. You should use rehype-slug-custom-id instead.

artt commented 1 year ago

To anyone who's stuck, remark-custom-heading-id works with MDX v2. (I tried the suggested rehype-slug-custom-id but it didn't work.)

rafalkrupinski commented 1 year ago

I had the same error message. Turned out to be a syntax error in MDX file, which I guess caused gatsby to pass it to either the JSX or JS compiler (acorn).

Not a valid mdx syntax? Hmm, let's swallow any errors, try another a parser for another programming language and show errors from that....

gatsbyjs / gatsby