Login/Register
Rails - Turbo - link preload but not used within a few seconds from the window's load event
Asked Answered
Solved javascriptcssruby-on-railspreloadturbo
R

2

18

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

Rutledge answered 25/6, 2022 at 11:35 Comment(2)
Maybe this thread can help you : #49674592 . Also, to be honest, I don't see any "Preload" on the .erb you have quoted in your question. Check your actual view to see where it comes from. – Sauls
@Sauls thanks but I saw a lot of this kind of solution but as you said I have no preload tag in my code neither in any of my pages, the head tag is given by my application.html.erb – Rutledge
P
22

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.

Primavera answered 7/7, 2022 at 16:6 Comment(4)
Thank you for your explanation ! Just needed to add in the development.rb : config.action_view.preload_links_header = false – Rutledge
@Rutledge did you do this in production as well? I get the warning in both envs. – Capitulary
@Capitulary this project is not pushed in production yet, did you have any problem for production environment ? – Rutledge
just the same warning – Capitulary
H
3

A temporary/lazy fix, and I'm not sure how this will affect performance, but the following eliminates the error in all environments:

config.action_view.preload_links_header = false
Heimdall answered 1/2, 2023 at 6:1 Comment(2)
where should I write this? – Margarettamargarette
@KrapiRastogi config/application.rb or your desired environment – Heimdall

© 2022 - 2024 — McMap. All rights reserved.