Gatsby.jsのビルドでWebpackのエラーが出たので対処した

エンジニアサイトのビルドでエラーを踏んだので、軽くメモを残します。調べてみたら、1年以上前から発生するはずなので、なんで今さら踏んだのかという感じです。
結論から言うと、以下のstackoverflowと公式のドキュメントで大体解決です。

Webpack breaking changes for builtin modules on Gatsby site

Troubleshooting Common Errors | Gatsby

発生した2つのエラー

webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case.

ERROR #98124  WEBPACK

Generating JavaScript bundles failed

Can't resolve 'zlib' in '/Users/yasuharu-sakai/workspace/cybozu-tech/node_modules/jsdom/lib/jsdom/living/helpers'

If you're trying to use a package make sure that 'zlib' is installed. If you're trying to use a local file make sure that the path is correct.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
	- add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
	- install 'browserify-zlib' 
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "zlib": false }

File: node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:26:11

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.

ERROR #98124  WEBPACK

Generating JavaScript bundles failed

Can't resolve 'fs' in '/Users/yasuharu-sakai/workspace/cybozu-tech/node_modules/jsdom/lib'

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.

エラーの原因

エラーメッセージにもありますが、webpack 4まではnode.jsのコアモジュールのpolyfillが含まれていました。それが、webpack 5では含まれなくなったため、polyfillを設定する必要が出たというわけです。

対処法

最初に貼ったリンクの通りに対応します。Gatsby.jsではgatsby-node.jsにwebpackの設定ファイルをカスタマイズするように書くことができます。

1つ目のエラーに対しては、stackoverflowにもあるように、以下のように対処します。上記のエラーはzlibで怒られているので、こんな感じです。

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
          zlib: require.resolve("browserify-zlib")
      },
    },
  })
}

2つ目のエラーに対しては、公式のトラブルシューティングに沿って、以下のように。

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
          fs: false,
      },
    },
  })
}

最終的に、出ているエラー全てに対応すると、私のサイトでは以下のような感じになりました。

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      fallback: {
          canvas: false,
          child_process: false,
          fs: false,
          http: require.resolve("stream-http"),
          https: require.resolve("https-browserify"),
          net: false,
          os: require.resolve("os-browserify/browser"),
          path: require.resolve("path-browserify"),
          stream: require.resolve("stream-browserify"),
          tls: false,
          url: require.resolve("url"),
          util: require.resolve("util"),
          zlib: require.resolve("browserify-zlib")
      },
    },
  })
}

ちなみに、対応が必要なパッケージは以下を参照してください。

Resolve | webpack

（本当に、なんで今まで踏まなかったんだろう…？）

最後に宣伝ですが、サイボウズのエンジニアサイトをどうぞよろしくお願いします。

Top | Cybozu Tech