Gatsby v4 へアップグレード

[toshifumiimanishi]

概要

公式ドキュメントに従って、 現在 のバージョンは v2 から最新のバージョンは v4 へアップグレードします。

[toshifumiimanishi]

公式ドキュメントによれば、

Before upgrading to v4 we highly recommend upgrading gatsby (and all plugins) to the latest v3 version. Some changes required for Gatsby 4 could be applied incrementally to the latest v3 which should contribute to smoother upgrade experience.

v2 から v4 へアップグレードする場合、v3 に段階的にアップグレードすること推奨されています。

[toshifumiimanishi]

gatsby v3 の最後のマイナーリリースである v3.1.4 をインストールします。

$ npm install gatsby@3.14.0

[toshifumiimanishi]

gatsby v3 のマイグレーションに失敗。 異なるバージョン graphql がインストールされる問題に遭遇。そのため、v2 から v4 へ一気にマイグレーションします。npm-check を利用して対話形式で Gatsby と Gatsby 関連パッケージを最新にします。

$ npx npm-check -u

⚠️ 注意事項

公式ドキュメントに従えば、下記コマンドを実行後に Gatsby 関連パッケージを最新にする流れですが、graphql がインストールされない問題が発生します。

$ npm install gatsby@latest

[toshifumiimanishi]

webpack 5 より Node.js の polyfill の自動挿入が廃止されたため、必要な polyfill をインストールします。今回インストールした polyfill は utill と stream-browserify の 2 つです。webpack 4 まで使われていた polyfill はこちらです。

Gatsby で webpack の設定をカスタマイズするための公式ドキュメントがあり、当ドキュメントと webpack の公式ドキュメントを参考に gatsby-node.js を次のように設定します。

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
        util: require.resolve(`util/`),
        stream: require.resolve(`stream-browserify`),
      },
    },
  })
}

[toshifumiimanishi]

記事ページの目次を描画する際に cheerio を利用しており、cheerio に依存する Buffer をブラウザ側で利用するため buffer をインストールします。さらに webpack の設定を次のように変更します。

+ const webpack = require(`webpack`)

...

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
+       buffer: require.resolve(`buffer/`),
        stream: require.resolve(`stream-browserify`),
        util: require.resolve(`util/`),
      },
    },
+   plugins: [
+     new webpack.ProvidePlugin({
+         Buffer: ['buffer', 'Buffer'],
+     }),
+   ],
  })
}