💡

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

2021/09/18に公開

Gatsby.js

Vercel

linaria

tech

vercelにGatsby×linariaを使たサイトをデプロイ（build）した時に下記のようなエラーに遭遇しました。

20:18:00.252  	Can't resolve '../../../../.linaria-cache/src/components/organisms/ContactForm/ContactForm.styles.linaria.css' in '/vercel/path0/src/components/organisms/ContactForm'
20:18:00.252  	If you're trying to use a package make sure that '../../../../.linaria-cache/src/components/organisms/ContactForm/ContactForm.styles.linaria.css' is installed. If you're trying to use a local file make sure that the path is correct.

.linaria-cacheディレクトリに含まれているCSSが見つからないといった名目でエラーになっているようでした。

ちなみにREDEPLOYを実行するとデプロイが無事デプロイができました。

しかし、REDEPLOYで解決するとはいえ、気持ちが悪いので原因を突き止めようとしたところ、下記の記事に巡り合いました。

上記記事を参考にした結果無事、キャッシュを読み込むようになったので対処法を記載します。

解決方法

今回はgatsby-plugin-linariaを使った解決策になります。

gatsby-config.jsでプラグインを渡しているところを下記のようにします！
※ gatsby-plugin-linariaは3.1.0以上をインストールしてください。

gatsby-config.js

module.exports = {
  // ...
  plugins: [
    // ...
    `gatsby-plugin-typescript`,
    {
      resolve: `gatsby-plugin-linaria`,
      options: {
        loaderOptions: {
          cacheDirectory: './.cache/caches/gatsby-plugin-linaria' // これを追加
        }
      }
    },
  ]
};

解説

vercelでは、フレームワークのプリセットに応じて、ビルドの高速化を図るために自動的にキャッシュする対象のディレクトリを割り当てているようです。

ですので、今回利用しているGatsbyのキャッシュが効いている.cacheディレクトリ配下にlinariaのキャッシュファイルが作成されるようにしました。

gatsby-plugin-linariaにはlinaria-loaderが利用されているため、linaria-loaderのオプションであるcacheDirectoryを指定することでlinariaのキャッシュが生成される場所を変更しました。

最後に

Gatsby × linaria を試したい方は、別の記事に導入記事を記載してありますのでご覧ください。

理解が乏しい箇所等があると思いますので、そこは違うよ！！ってところは指摘お願いいたします。

解決方法

解説

最後に

参考

Discussion