Gatsbyのバージョンを2系から5系にアップデート

2023-01-17

このブログは約２年前に作成されたのですが、ブログを作ることに満足してその後２年間記事もほとんど書かれずに放置されてました。今回ブログを気まぐれに再開してみようと思い立ったので、手始めにブログを手元でビルドしてみることに。

このブログはGatsbyというフレームワークで動いているので、Gatsbyのメジャーバージョンを確認したところ最新版は5系になっていました。現在は2系を使用しているので、だいぶ古いようです。時代の流れを感じる。

というわけで、とりあえずGatsbyのバージョンを最新版にアップデートして、それを記事にしてしまおう作戦を開始するのであります。

Gatsbyのアップデートにはここを参考にすると

Node18
React18

あたりをアップデートしないといけないぽいです。

Dockerfileの修正

このブログはありがたいことに環境がなぜかDocker化されてました。多分昔の自分が練習でやったと思われるのですが、Docker化されていたので、手元でのビルドが超楽でした。 2年前の環境なのにエラーが起きることなくすんなり動きました。 Dockerは最高ですね。

とりあえずDockerfileの設定をNode18が使えるように書き換えます。

Dockerfile

FROM node:18

WORKDIR /app
COPY package*.json ./
RUN npm install && npm cache clean --force
COPY . .

package.jsonの修正

npm outdatedを叩いて、アップデートを確認します。 package.jsonを全部最新のバージョンに合わせます。

console

root@b37732086fa9:/workspaces/project/soraef-blog# npm outdated
Package                         Current   Wanted   Latest  Location                                     Depended by
@emotion/core                   10.0.35   10.3.1   11.0.0  node_modules/@emotion/core                   soraef-blog
gatsby                          MISSING  2.32.13    5.4.1  -                                            soraef-blog
gatsby-image                     2.4.20   2.11.0   3.11.0  node_modules/gatsby-image                    soraef-blog
gatsby-plugin-emotion            4.3.14    4.5.0    8.4.0  node_modules/gatsby-plugin-emotion           soraef-blog
gatsby-plugin-google-analytics   2.3.19   2.11.0    5.4.0  node_modules/gatsby-plugin-google-analytics  soraef-blog
gatsby-plugin-manifest           2.4.33   2.12.1    5.4.0  node_modules/gatsby-plugin-manifest          soraef-blog
gatsby-plugin-offline            3.2.33   3.10.2    6.4.0  node_modules/gatsby-plugin-offline           soraef-blog
gatsby-plugin-react-helmet       3.3.12   3.10.0    6.4.0  node_modules/gatsby-plugin-react-helmet      soraef-blog
gatsby-plugin-robots-txt          1.5.3    1.8.0    1.8.0  node_modules/gatsby-plugin-robots-txt        soraef-blog
gatsby-plugin-sharp              2.6.38   2.14.4    5.4.0  node_modules/gatsby-plugin-sharp             soraef-blog
gatsby-plugin-sitemap            2.4.17   2.12.0    6.4.0  node_modules/gatsby-plugin-sitemap           soraef-blog
gatsby-plugin-typography         2.5.13   2.12.0    5.4.0  node_modules/gatsby-plugin-typography        soraef-blog
gatsby-remark-prismjs            3.5.16   3.13.0    7.4.0  node_modules/gatsby-remark-prismjs           soraef-blog
gatsby-source-filesystem         2.3.32   2.11.1    5.4.0  node_modules/gatsby-source-filesystem        soraef-blog
gatsby-transformer-remark        2.8.38   2.16.1    6.4.0  node_modules/gatsby-transformer-remark       soraef-blog
gatsby-transformer-sharp         2.5.16   2.12.1    5.4.0  node_modules/gatsby-transformer-sharp        soraef-blog
prettier                          2.1.2    2.1.2    2.8.3  node_modules/prettier                        soraef-blog
prismjs                          1.22.0   1.29.0   1.29.0  node_modules/prismjs                         soraef-blog
prop-types                       15.7.2   15.8.1   15.8.1  node_modules/prop-types                      soraef-blog
react                           16.13.1  16.14.0   18.2.0  node_modules/react                           soraef-blog
react-dom                       16.13.1  16.14.0   18.2.0  node_modules/react-dom                       soraef-blog
react-typography                0.16.19  0.16.23  0.16.23  node_modules/react-typography                soraef-blog
typography                      0.16.19  0.16.21  0.16.21  node_modules/typography                      soraef-blog

ncu -uというコマンドでpackage.jsonを最新のものに書き換えられるらしいです。グローバルにインストールしてncuコマンドを実行してみました。確かに、全部最新バージョンになりました。便利～

npm i -g npm-check-updates
ncu -u

ここでpackage.jsonを変更したので、npm updateを実行して最新のパッケージに更新を行います。

npm update

npm update結構長いんだよなぁ。。。npm updateがおわるまで、コーヒーを入れてまちます。

ビルド時のエラーを直す

updateがおわったら、gatsby developを叩いて起動します。package.jsonのscriptsに登録してあるので、そっちを呼び出します。

npm run develop

そしたら次のようなエラーがでてしまったので、gatsby cleanします。

ERROR  UNKNOWN

Unexpected keys "componentDataDependencies", "pageData" found in preloadedState argument passed to createStore. Expected to find one of the known reducer keys instead: "nodes", "logs", "pages", "redirects", "schema",
"definitions", "staticQueryComponents", "status", "webpack", "webpackCompilationHash", "config", "lastAction", "jobsV2", "pageDataStats", "components", "babelrc", "jobs", "nodesByType", "program", "resolvedNodesCache",
"nodesTouched", "flattenedPlugins", "pendingPageDataWrites", "schemaCustomization", "inferenceMetadata", "staticQueriesByTemplate", "queries", "visitedPages", "html", "functions", "telemetry", "nodeManifests", "pageTree",
"requestHeaders", "slices", "componentsUsingSlices", "slicesByTemplate". Unexpected keys will be ignored.

cleanを実行して、もう一度developを呼び出してみます。ここでエラーが起きなくて、ページが見えればいいのですが、どうでしょうか。

npm run clean
npm run develop

さっきのエラーはきえたのですが、別のエラーがでてきました。

ERROR  UNKNOWN

Using the global `graphql` tag for Gatsby's queries isn't supported as of v3.
Import it instead like:  import { graphql } from 'gatsby' in file:
/workspaces/project/soraef-blog/src/templates/blog-post.js

エラーメッセージによると、blog-post.jsにimport { graphql } from 'gatsby'を追加せよとのことなので、そのようにしてみました。

import React from "react"
import Layout from "../components/layout"
import SEO from "../components/seo"
import "../styles/post.css"
import { graphql } from "gatsby"

ファイルのインポートを修正したので、もう一度npm run developします。

ここでエラーはなくなったので、localhost:8000を開きます。

そうしたら、以下のようなRuntime Errorが発生したというダイアログがブラウザ上に表示されました。

Error in function eval in ./node_modules/@emotion/core/dist/emotion-core.cjs.dev.js:3
The `@emotion/core` package has been renamed to `@emotion/react`. Please import it like this `import { jsx } from '@emotion/react'`.

@emotionパッケージの修正

どうやら@emotion/coreはなくなって、@emotion/reactに改名されたっぽいです。

package.jsonをアップデートする必要がありそうです。

npm install @emotion/react
npm uninstall @emotion/core

そしてファイル内で@emotion/coreをimportしていた箇所をすべて@emotion/reactに置換しました。

この修正をしてビルドしたら、無事記事が表示されました。

終わりに

とりあえず、Gastbyをバージョンアップすることができました。

そんなに機能がないので、特に大きな変更はなかったのかなという感想です。

せっかく頑張ってアップデートしたので、しっかり記事を書いていきます。たぶん。

Soraef

ソフトウェアエンジニア。趣味は競馬、写真、ゲーム。

お問い合わせはTwitterのDMでお願いします。