The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window's load event.

はじめに

RubyonRailsでアプリを開発していた時にjsを用いて写真プレビュー機能の作成時に起こったエラーです。
今回は２つの解決法を使って解説しましたので自分に合った解決法が見つかれば幸いです。

使用する環境

• MacOS（M1）
• Rails 6.1.4
• Ruby 2.6.3
• yarn 1.22.17
• Homebrew 3.5.0

エラー文

「The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.」

解決法１：特定のページでのフルリロードを実行する

Before

application.html.erb

 <%= javascript_pack_tag "application", 'data-turbolinks-track': "reload" %>
 <%= javascript_pack_tag "profile_image" %>

After

application.html.erb

 <%= javascript_pack_tag "application", 'data-turbolinks-track': "reload" %>
 <%= javascript_pack_tag "profile_image" %>
 <meta name="turbolinks-visit-control" content="reload">  # 追加

コードの解説

こちらのコードの解説をしていきます。
エラーを訳すと、ファイル名は link preload を使用してプリロードしましたが使用されていません。適切な as 値を持ち、意図的にプリロードされていることを確認してください。
このエラーから自分は、「うまくリロードできてないのかな」って思いました。
そこから、turbolinksが怪しいと思いました。

turbolinksとは

これはページの表示を早くするため、ページを画面遷移するのではなくHTMLのbody要素を差し替えていかにも画面遷移したように見せかけて、早く表示することができる技術です。
しかしそのデメリットとして、JQueryなどのイベントが発火されないなどの問題があります。

<meta name="turbolinks-visit-control">

こちらをheadに含めることで、特定のページを表示するときに常にスーパーリロードして表示します。
しかしこれでは、キャッシュなどがあっても強制的に再度リロードしてしまうため、表示スピードが遅くなってしまいます。
なのでこちらを使うときは、if文などを使ってJsファイルがうまく読み込まれてないページだけ使うのが良さそうです。

解決法２：Jsファイルに「turbolinks:load」を追加する（個人的にはこちらの方がおすすめです）

turbolinksによってjsのイベントがうまく発火しない場合は、「turbolinks:load」というオプションを使用することで、読み込みが正常に行われます。

Before

$(function(){
  // 処理内容 
});

After

$(document).on('turbolinks:load', function() {
  // 処理内容
});

参考:https://github.com/turbolinks/turbolinks#reloading-when-assets-change

最後に

上手く説明できなかったところもあるかもしれませんが、少しでもお役になったら幸いです