生活の跡

個人的な備忘録

gatsby develop で[Syntax Error: Unexpected Name "implements"]が発生した

経緯

GatsbyでWeb制作をしており、CMS(※)にはContentfulを使っています。Contentfulのデータを扱うために必要なプラグイン gatsby-source-contentful をインストールし、環境変数を渡して開発サーバを$gatsby developで起動したらエラーが発生しました。
(※)Contents Management Systemの略。WordPressが有名。

環境

  • macOS Big Sur(ver 11.2.3)
  • bash 3.2.57

実行コマンド

CONTENTFUL_SPACE_ID=xxxxxx CONTENTFUL_ACCESS_TOKEN=xxxxxx CONTENTFUL_HOST=cdn.contentful.com gatsby develop -H 0.0.0.0

ID、Tokenは公開できないので、xxxxxxに置き換えてあります。

エラー内容

Encountered an error parsing the provided GraphQL type definitions:
Syntax Error: Unexpected Name "implements"

  1 |
> 2 |   interface ContentfulEntry implements Node {
    |                             ^
  3 |     contentful_id: String!
  4 |     id: ID!
  5 |     node_locale: String!
  6 |   }
  7 |

解決方法

$yarn upgrade --latestでGatsbyのバージョンをアップグレードしたらエラーが消えました。

原因

エラー発生直後に$gatsby -vコマンドで確認したバージョンは次の通りでした。

Gatsby CLI version: 3.2.0
Gatsby version: 2.32.3

一方、Webで調べると、gatsby-source-contentful(ver.5)はGatsbyのバージョン3以上が求められていますよ、と書かれているQ&Aを発見。

stackoverflow.com

gatsby-source-contentful のバージョンは不明でしたが、上述の通り$yarn upgrade --latestによってGatsby versionが3.2.1に更新されたことで無事解決。

おわりに

バージョンが古いことによるパッケージの不整合はよくありますね。stack overflowに同じエラーでのQ&Aがあって助かりました。