ビルドすると、mdxファイルがパースエラーになる
目次
Could not parse expression with acorn: Expecting Unicode escape sequence \uXXXX
GatsbyJS を 5 にアップデートしてみるの mdx ファイルをビルドすると、エラーが発生。
Could not parse expression with acorn: Expecting Unicode escape sequence \\uXXXX
この様なエラーが出たのは初めてだったので、Gatsby5 にしたのが原因なのかな？ とか思いながら、Gatsby4 の環境で同じ mdx ファイルをビルドしてみたんですが、こちらはエラーは出ず。
gatsby-plugin-mdx のドキュメントを見てみる
ひとまず、gatsby-plugin-mdx のドキュメントを見てみる。
すると、以下の様な記述が…
As MDX v2 changed the way it handles content you might need to update your MDX files to be valid MDX now. See their Update MDX content guide for all details. In What is MDX? it is also laid out which features don’t work. Most importantly for this migration:
MDX が v2 になって、変更点があった様です。
Unescaped left angle bracket / less than (<) and left curly brace ({) have to be escaped: < or { (or use expressions: {'<'}, {'{'})
どうやら< と { を表示するには、エスケープ処理が必要になったらしい…
パースエラーは出ず
Gatsby4 の package.json
"gatsby": "^4.25.4",
"gatsby-plugin-mdx": "^3.20.0",
"@mdx-js/mdx": "^1.6.22",
"@mdx-js/react": "^1.6.22",
パースエラーになる
Gatsby5 の package.json
"gatsby": "^5.5.0",
"gatsby-plugin-mdx": "^5.5.0",
"@mdx-js/mdx": "^2.2.1",
"@mdx-js/react": "^2.2.1",
記事の通り ＠mdx-js が v2 の環境だと、エラーが発生していました。
エスケープ処理を行う
先の記事の mdx ファイル内で、ファイル名（{mdx.slug}.js や{mdx.frontmatter__slug}.js ）を記述した際には、エスケープ処理をしていませんでした。
Gatsby4 の環境は v1 だったので、エスケープ処理せずともエラーにはならなかったと。
Gatsby5 の v2 の環境でも、エスケープ処理をきちんと行うと、エラーは表示されなくなりました。
コード内はエスケープ処理しなくても大丈夫っぽい
// エスケープ処理あり
\<h1>タイトル\</h1>
シンタックスハイライトには prism.js を使っているんですが、上記の様にコード内でエスケープ処理を行うと、バックスラッシュはそのまま表示されてしまうみたいです。
コード内ではエスケープ処理はしなくても大丈夫っぽいです。
frontmatter 内も処理しなくて大丈夫っぽい
---
title: "ビルドすると、mdxファイルがパースエラーになる"
date: "2023-03-02T23:35:16.365Z"
summary: "ファイル名は、\{mdx.slug}.jsです"
---
frontmatter 内でエスケープ処理をすると上記の様になってしまうので、こちらも処理の必要はなさそうです。
Unexpected character
Unescaped left angle bracket / less than (<) and left curly brace ({) have to be escaped: < or { (or use expressions: {'<'}, {'{'})
先に引用した箇所ですが、そのままでは以下のエラーが出ました。
Unexpected character `)` (U+0029) before name, expected a character that can start a name, such as a letter, `$`, or `_`
この記事を読むとエスケープ処理が必要みたいだけど、複雑な記述になりそうな気が…
何か方法はないかなぁ…と思いながら、Gatsby のマニュアルを再び見ていると…
上記リンク内の文章（In our testing〜）の下にある DIFF で囲まれているコードの様に、Unescaped left angle bracket〜の文章全体を backticks で囲んであげると、エラーは出なくなりました。
もっといい方法があるのかもしれませんが、ひとまずこんな感じで。