Netlify CMSで Incorrectly eaten value エラーが発生した時の対処法

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今日は前回の記事「Netlify CMSを使っている環境で、CMSでのコンテンツ作成とCMSを介さないコンテンツ作成を同時に行っている際に気をつけたいこと」と関連するのですが、GatsbyJS + Netlify CMS の環境で、CMS上であるコンテンツを編集しようとした際に、 Incorrectly eaten value というエラーが発生した時の対処法についてまとめたいと思います。

エラーの内容

手元で直接 Markdown ファイルを追加してコンテンツをリリースした際、該当するコンテンツをCMSで編集しようとすると Incorrectly eaten value というエラーが出て編集が出来ないことがありました。

エラーメッセージには remarkjs の問題と出ていましたが、remarkjs に立っている issue を見る限り Netlify CMS 側の問題である可能性が高そうです。

調べたところ、どうやら Markdown ファイル上で frontmatter の後に空行と画像が書かれているために発生するバグのようでした。

...
thumbnail: '/xxx.jpg'

---
![Gaji-Labo Blog](/xxx.jpg)
...

対処法

これを防ぐために、空行を削除して frontmatter の直後に画像が来るようにしました。

...
thumbnail: '/xxx.jpg'
---
![Gaji-Labo Blog](/xxx.jpg)
...

これでIncorrectly eaten value というエラーが出ることは無くなりました。

CMS上で編集した際には frontmatter と画像の間に空行が挟まることは無いため、CMSと直接編集を併用している時に特有で起きる現象です。

まとめ

今回は Netlify CMS を使っている際、 Incorrectly eaten value というエラーが発生した時の対処法についてまとめました。

このエラーに遭遇した際に役立てていただけると嬉しいです。

シリーズ「Netlify CMSを実践で使ってみた」として、他にもNetlify CMSの感触・知見・TIPSについて書いた記事をまとめています。Netlify CMSやNetlify関連の周辺トピックに興味のある方は、シリーズの他の記事もぜひ読んでいただけたらと思います!

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。