[Nuxt.js] hard-source-webpack-plugin導入時のエラー対処法

Nuxt.js で構築したプロジェクトにHardSourceWebpackPluginを導入した。そこで上手くビルドが出来なくなってしまった。

どんな問題が起きたか

npm run devの初回は問題なし。

ただ、次回のnpm run dev実行時に、下記のようなエラーが発生した。

  ████████████████████ 91% additional chunk assets processing/nuxt-project/node_modules/hard-source-webpack-plugin/node_modules/source-list-map/lib/fromStringWithSourceMap.js:11
  var sources = map.sources;
                    ^
TypeError: Cannot read property 'sources' of undefined
    at fromStringWithSourceMap (/nuxt-project/node_modules/hard-source-webpack-plugin/node_modules/source-list-map/lib/fromStringWithSourceMap.js:11:20)

npm run buildなども同様。

解決方法

Trouble Shooting の Hot Reloading に関する注記に関連した問題だった。

そもそも、Nuxt.js がここで参照すべきファイルの実体は/.nuxt/dist/.cache/hard-source/〜になるので、nuxt.config.jsへの指定は下記のように指定する必要がある。

new HardSourceWebpackPlugin({
  cacheDirectory: '.cache/hard-source/[confighash]',
}),

デフォルト: node_module/.cache/hard-source/〜

まとめ

時間の掛かっていたビルドが高速化されるようになった。（初回を除く）