👏

Next.js × linariaでビルド時にキャッシュが見つからないエラーが出るときの対処法【暫定？】

2021/08/11に公開

Next.js

linaria

tech

Vercel上でNext.jsとlinariaを動かしているとき、ある時点を境に以下のようなエラーが表示されるようになってしまいました。

18:40:11.531  	Failed to compile.
18:40:11.531  	ModuleNotFoundError: Module not found: Error: Can't resolve '../.linaria-cache/pages/404.linaria.module.css' in '/vercel/path0/pages'
18:40:11.532  	> Build error occurred
18:40:11.533  	Error: > Build failed because of webpack errors
18:40:11.533  	    at /vercel/path0/node_modules/next/dist/build/index.js:15:924
18:40:11.533  	    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

.linaria-cacheディレクトリに含まれているCSSが見つからないといった名目でエラーになっています。
ちなみに、VercelのコンソールからREDEPLOYをすると成功します。

結局はっきりと原因が分かったわけではないのですが、ある設定をすることでこのエラーが出なくなったため、記事にしておきます。

解決法

ズバリ、next.config.jsに以下のように設定を書き足せばOKです。

const withLinaria = require('next-linaria');

module.exports = withLinaria({
    linaria: {
        /**
         * https://vercel.com/docs/build-step#caching
         * で記載されているディレクトリにビルド結果をキャッシュさせる
         */
        cacheDirectory: './.next/cache/.linaria-cache',

どうしてこの方法で対処ができると思ったのか

REDEPLOYをすると成功することから、成功時のビルドログと失敗時のログを見比べてみました。

すると、失敗するときは必ずビルドキャッシュを参照していました。

18:39:52.038  	Looking up build cache...
18:39:52.437  	Build cache found. Downloading...

これは以下のドキュメントにも書いてあるとおり、ビルドの高速化を図るためにVercel側が実装している機能とのことです。

もともとのエラーログを見ると、.linaria-cache以下のファイルが見つからないというエラーになっているのですが、.linaria-cacheはデフォルト設定ではプロジェクトルートに作られるディレクトリなので、Vercelがキャッシュする.nextディレクトリ以下には含まれません。

そこで、linaria-loaderの設定を変更し、cacheDirectoryを指定することで対応してみたところ、ビルドが成功するようになりました。

以上です。もし同様の事象に遭遇している方がいれば、ご参考までに。

解決法

どうしてこの方法で対処ができると思ったのか

Discussion