javascriptcssruby-on-railspreloadturbo

Rails - Turbo - link preload but not used within a few seconds from the window's load event

This is a common question on the web but I didn't found any solution for my problem...

I have the same warning message in console on all my rails apps when I click on a link to an other page

Just need to find THE solution now...

The resource http://localhost:3000/assets/application-eda55435df3b9385974c23342a8ac80ac010272673a829df638338aed54fe933.css 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.

I have no tag in my application.html.erb but I use Turbo if it can help you

Application.html.erb

<head>
<title>XXXX</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>

<%= javascript_pack_tag 'application', 'data-turbo-track': 'reload', defer: true %>
</head>

application.js

import Rails from "@rails/ujs"
import "@hotwired/turbo-rails"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

Rails.start()
ActiveStorage.start()

import "controllers"
import "bootstrap"

This warning is showed on development & production environments

Solution

  • I ran into the same problem with an app that was upgraded from the Rails 6.0 default configs to Rails 7.0 (we had upgraded to 6.1 without updating the config.load_defaults version). It appears that this is a default behavior introduced in 6.1 that automatically sends the browser a "Link" header instructing it to preload assets. If you check the Network tab in the browser console, you should see this in the "Response Headers" section.

    It seems like this is intended to improve page load performance, see item 16 in this guide, but it's not always appropriate. Some discussion and links are in the PR adding the config option to disable it and this Twitter thread.

    Note for future visitors: this can also cause problems with CSP handling, specifically for scripts loaded via javascript_include_tag with nonce: true. I found that Firefox still allowed these scripts but Safari and Chrome both blocked them, presumably because of the order in which they were loaded.