Gatsbyのバージョンを2系から5系にアップデート
2023-01-17
このブログは約２年前に作成されたのですが、ブログを作ることに満足してその後２年間記事もほとんど書かれずに放置されてました。 今回ブログを気まぐれに再開してみようと思い立ったので、手始めにブログを手元でビルドしてみることに。
このブログはGatsbyというフレームワークで動いているので、Gatsbyのメジャーバージョンを確認したところ最新版は5系になっていました。 現在は2系を使用しているので、だいぶ古いようです。時代の流れを感じる。
というわけで、とりあえずGatsbyのバージョンを最新版にアップデートして、それを記事にしてしまおう作戦を開始するのであります。
Gatsbyのアップデートにはここを参考にすると
- Node18
- React18
あたりをアップデートしないといけないぽいです。
Dockerfileの修正
このブログはありがたいことに環境がなぜかDocker化されてました。多分昔の自分が練習でやったと思われるのですが、Docker化されていたので、手元でのビルドが超楽でした。 2年前の環境なのにエラーが起きることなくすんなり動きました。 Dockerは最高ですね。
とりあえずDockerfileの設定をNode18が使えるように書き換えます。
FROM node:18
WORKDIR /app
COPY package*.json ./
RUN npm install && npm cache clean --force
COPY . .package.jsonの修正
npm outdatedを叩いて、アップデートを確認します。 package.jsonを全部最新のバージョンに合わせます。
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-blogncu -uというコマンドでpackage.jsonを最新のものに書き換えられるらしいです。
グローバルにインストールしてncuコマンドを実行してみました。
確かに、全部最新バージョンになりました。便利～
npm i -g npm-check-updates
ncu -uここでpackage.jsonを変更したので、npm updateを実行して最新のパッケージに更新を行います。
npm updatenpm 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をバージョンアップすることができました。
そんなに機能がないので、特に大きな変更はなかったのかなという感想です。
せっかく頑張ってアップデートしたので、しっかり記事を書いていきます。たぶん。
タグ
そらえふ
ソフトウェアエンジニア。趣味は競馬、写真、ゲーム。
お問い合わせはXのDMでお願いします。