Gatsbyのテンプレート作成の際にgatsby-node.jsのPathモジュールでハマった件

2019年2月2日

Gatsbyでテンプレートからページを生成するためにgatsby-node.jsを新たに追加してた時にハマって無駄に時間を費やしてしまいました。結果的には超基本的なことだったんですが、教訓として忘れないためにもメモっておきます。

GatsbyでAPIから引っ張ってきたデータを元にテンプレートを使ってページを生成する場合、gatsby-node.jsでcreatePage()を使います。やり方は以下のページに書いてあって、一度読んで理解していたつもりなんですけどね。実は、ここのサンプルコードにも惑わされました。

Programmatically create pages from data | GatsbyJS

で、今回は以下の部分でハマりました。


createPage({
  path: node.data.slug,
  component: path.resolve(`./src/templates/blog-post.js`),
  context: {
    slug: node.data.slug,
  },
})

ここにpathとういうkeyが出てくるわけなんですが、これ、Node.jsのpathモジュールがないと動かないんですね。えぇ、そうですよね。そうでしょうよ。

でも、言い訳をするなら、GatsbyJSでやってくれることとそうでないことがわかりづらいんじゃぁ（千鳥風）。

エラーにも出てきてたんですけど、そんな熱烈なラブコール、優れた鈍感力を持ち合わせた僕には届きませんでした。

ReferenceError: path is not defined

これ、pathに指定している値node.data.slugがしっかり引っ張ってこれてないのかと勘違いしてました。で、GraphQLの書き方がおかしいのか、JSのオブジェクトの参照の仕方が間違っているのか...など、何度も同じようなところをぐるぐる確認して回って。ふと、あれ？となって以下の行が抜けていたのに気がつきました。

const path = require(`path`)

こ、この1行のために...。俺の時間を返せぇぇぇ。

と、いう話でした。

ちなみに、上述したGatsbyJSのドキュメントページのサンプルコードでは、この1行が抜けているんですね。ここのサンプルコードは、そのファイルの全てを載せているわけではないので仕方ないんでしょうけど。

ハマってしまいました。

Pathモジュール。一生忘れねぇw

一覧に戻る