NextJS11でfsなどのbuildを通す方法

ついこの間Next11がリリースされましたね。 Next11では、デフォルトでWebpack5になりました。(引き続きオプションによってWebpack4が使用できます。)

アップデートする際に、webpackに関するエラーが出たので備忘録として記録しておきます。

next.config.jsでは、webpackの設定を変更できる機能がありまして、webpack5だとその書き方が変わってきます。

NextJS 10 の時のwebpack設定

webpack: (config) => {
  config.node = {
    fs: 'empty',
    child_process: 'empty',
    net: 'empty',
    dns: 'empty',
    tls: 'empty',
  };
  return config;
},

fsなど、nodeの機能を呼び出す場合にこのようにして、emptyとなるようにしていました。

NextJS 11 のwebpack設定

webpack: (config) => {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false,
      child_process: false,
      net: false,
      dns: false,
      tls: false,
    };
    return config;
  },

書き方が変わり、resolve.fallbackに書かないと行けなくなりました。特にここ以外は問題なく動作しました。

最近はこれよりも、最新バージョンのreact-hook-formの破壊的変更のほうが修正が大変でした。フロントエンドはアップデートが早いので、yarn upgrade-interactive -- latest で更新していくと良さそうですね。