GatsbyJS と Netlify のエラー対応

May 25, 2020開発GatsbyJS, Netlify

ブログを書くためビルド用 npm を更新してから GatsbyJS と Netlify の Deploy でエラーが発生 & 修正したので、それについての覚書。

GatsbyJS

本ブログは現在 GatsbyJS で運用している。GatsbyJS は活発に開発されており、これに追従すべく記事更新ぐらいのタイミングで npm をまとめて更新している。

そして本日、業務が始まる前にサクッと更新 & 動作確認するかと実施してみたところ、GatsbyJS のプレビューでエラーになった。

Error: Element type is invalid:expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `IndexPage`.

React コンポーネント IndexPage で別コンポーネントの参照に失敗しているようだ。これは自作部分なので問題を切り分けるため参照をすべてコメントアウトしてから一つずつ有効化してみた。そして原因は react-helmet の参照方法であることが判明。

これまでは以下のように default export を対象としていた。

import Helmet from 'react-helmet'

しかし react-helmet は v6.0.0 で Bundle 処理を webpack から Rollup へ変更。それにともない default export をやめたとのこと。

Release notes で注釈されているとおり参照方法を修正。

import { Helmet } from 'react-helmet'

これでエラーも直った。修正の前後で VS Code にて Helmet へマウスホバーしてみると

import Helmet

から

(alias) class Helmet
import Helmet

へ変わっていた。もしかすると TypeScript + tsconfig.json で any 未許容なら VS Code 上で簡単に原因特定できていたかもしれない。

Netlyfy

ローカルで gatsby build も通るようになったので git push して Netlify へ Deploy してみた。しかし Failed になる。たまたまかな？とログを読みつつ再試行してみるも、同じエラーが繰り返された。

8:50:48 AM: Executing user command: npm run build
8:50:48 AM: > akabeko.me@1.0.0 build /opt/build/repo
8:50:48 AM: > gatsby build
8:50:49 AM: /opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli/lib/init-starter.js:117
8:50:49 AM:   } catch {
8:50:49 AM:           ^
8:50:49 AM: SyntaxError: Unexpected token {
8:50:49 AM:     at createScript (vm.js:80:10)
8:50:49 AM:     at Object.runInThisContext (vm.js:139:10)
8:50:49 AM:     at Module._compile (module.js:617:28)
8:50:49 AM:     at Object.Module._extensions..js (module.js:664:10)
8:50:49 AM:     at Module.load (module.js:566:32)
8:50:49 AM:     at tryModuleLoad (module.js:506:12)
8:50:49 AM:     at Function.Module._load (module.js:498:3)
8:50:49 AM:     at Module.require (module.js:597:17)
8:50:49 AM:     at require (internal/module.js:11:18)
8:50:49 AM:     at Object.<anonymous> (/opt/build/repo/node_modules/gatsby/node_modules/gatsby-cli/lib/create-cli.js:28:20)
8:50:49 AM: npm
8:50:49 AM:  ERR!
8:50:49 AM: code
8:50:49 AM:  ELIFECYCLE
8:50:49 AM: npm
8:50:49 AM:  ERR! errno
8:50:49 AM:  7
8:50:49 AM: npm
8:50:49 AM:  ERR! akabeko.me@1.0.0 build: `gatsby build`
8:50:49 AM: npm ERR! Exit status 7

もしかしてローカルと Netlify の環境差が原因？とログをさかのぼってゆく。そして冒頭あたりに出力されていた Node.js のバージョンが古すぎることに気付いた。

8:49:19 AM: Downloading and installing node v8.17.0...

Node.js の最新は v14.x で LTS も v12.x だ。一世代前の LTS である v10.x にすら届いていない。これを変更する方法はあるのかと調べたら以下に解説されていた。

Manage build dependencies | Netlify Docs
環境変数 NODE_VERSION を設定
.node-version または .nvmrc ファイルにバージョンを記述してプロジェクトのルートディレクトリーへ配置

これらの方法でバージョンを明示できるとのこと。今回は .nvmrc を採用した。ローカルで node -v したら v14.2.0 だったのでこれを記述。改めて git push して Deploy を走らせたところ、ログ上で反映を確認できた。

8:53:00 AM: Attempting node version 'v14.2.0' from .nvmrc

最終的にすべて成功して無事、Web 公開までこぎ着けた。

アカベコマイリ

HEAR NOTHING SEE NOTHING SAY NOTHING

GatsbyJS と Netlify のエラー対応

GatsbyJS

Netlyfy