next.js: [NEXT-1307] Preloaded CSS files not used within a few seconds

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 19.6.0: Sun Jul  5 00:43:10 PDT 2020; root:xnu-6153.141.1~9/RELEASE_X86_64
    Binaries:
      Node: 16.14.0
      npm: 7.24.2
      Yarn: 1.22.19
      pnpm: 8.6.2
    Relevant packages:
      next: 13.4.7-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.4

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/JasperAlexander/nextjs-preloadwarning-example

To Reproduce

Clone https://github.com/JasperAlexander/nextjs-preloadwarning-example.
Run pnpm i in the project directory.
Run pnpm run dev in the project directory.
Open http://localhost:3000/ in Google Chrome.
Open the console of Google Chrome DevTools.
Hover your mouse over the link. You will see the following warning in the console: The resource http://localhost:3000/_next/static/css/app/child/page.css?v=1687197477239 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.

Describe the Bug

Because of a change in the router behaviour during prefetching introduced in #49077 at v13.3.5-canary.6, styles are preloaded but not used. This causes lots of warnings in the Chrome DevTools when you’re making an app with multiple pages and links. There is a lot of discussion about this issue (#49607).

Expected Behavior

No more preload warnings.

Which browser are you using? (if relevant)

Chrome 114.0.5735.133

How are you deploying your application? (if relevant)

No response

_{From SyncLinear.com | NEXT-1307}

About this issue

Original URL
State: open
Created a year ago
Reactions: 28
Comments: 18 (5 by maintainers)

Most upvoted comments

How is this still not fixed. It’s crazy that a framework with such a large “community” still seems to have errors like this. This preload warning occurs not just on chrome browsers btw. Seems to only happen when I create an app with the appDir. Yet vercel is still recommending it on initial install. Incredibly annoying when developing. No issues like this with Nuxt or SvelteKit get it together vercel.

+10

chadborghini on Jul 25, 2023

@JesseKoldewijn maybe we’re testing on different non chromium based browsers, because the same warning is logged in recent versions of firefox. It is not limited to chromium based browsers.

When you say you don’t see it happen in every project when hmr hasn’t ran yet, do you mean that as long as code isn’t edited the issue doesn’t surface?

In my experience it’s not only annoying in dev whilst debugging. As soon as the warnings begin, the entire dev enviroment becomes super slow as it seems to be clogging a ton of resources to the point of freezing the browser.

wallpants on Jun 20, 2023

How is this still not fixed. It’s crazy that a framework with such a large “community” still seems to have errors like this. This preload warning occurs not just on chrome browsers btw. Seems to only happen when I create an app with the appDir. Yet vercel is still recommending it on initial install. Incredibly annoying when developing. No issues like this with Nuxt or SvelteKit get it together vercel.

I think this lack of urgency is partly caused by this issue only having four likes. It is quite strange to see that 10 people gave a laughing emoji to a post in the discussion last week stating that this warning also appears on the next.js website, while I said the same in my post in this issue on June 20. Even more strange is that the maintainer who caused this issue with PR #49077 reacted to that post in the discussion with ‘oh I see, it’s a different issue that I fixed I think’, which suggests he hasn’t read this issue yet.

JasperAlexander on Jul 27, 2023

From what I’ve both seen in previous issues about this matter its a chrome specific issue that only happens on dev due to stylesheet rebuilding in hmr.

The warnings also appear on Firefox and Edge, even in production. You can see the same warnings when opening the console at https://nextjs.org/.

Plus as you mention yourself this issue is basically a dupe from multiple other related ones.

Which related ones? I cannot find an open issue which addresses this problem.

I’ve also seen this same topic come back every now and then since v13 came out and even before that. From what I’ve experienced it’s a no issue on prod and only logs on chromium based browsers in dev.

As stated above, this is also an issue in production and also in Firefox and Edge.

I agree its annoying in dev while debugging but to be honest, I don’t see it happen in every project (when hmr hasn’t ran yet) so I personally don’t think it’s due to any changes in the next router.

Can you reproduce an app with Next.js v13.3.5-canary.6 or higher that uses the app directory, has a second page that imports a CSS file and is linked to from the first page, which doesn’t generate these warnings?

I’ve tested this behavior on the last 3 versions of chrome and brave without any form of consistent behavior in the sense that it doesn’t surface in every project. Some mentioned in the discussion you’ve linked that it might have to do with tailwind which as far as I’ve notices isn’t the case.

Can you make a screencast of testing the reproduction? My experience is that there is very consistent behaviour. It indeed hasn’t anything to do with Tailwind, as can be seen with my reproduction code.

When I’ve seen the issue it mainly happens after hmr ran due to code changes. Apart from that I did see it happen now and then on some projects which only happened right after starting the dev server and resolved itself after cache clear in the browser.

This is not what I experience when running the reproduction.

I have not noticed the browser freezing and/or performance slowdown. Whilst I’ve tested this behavior on multiple different browsers and systems (linux & win11) I personally haven’t seen this behavior you’re describing.

I do also experience a performance slowdown when running my app in dev environment, but this may be caused by all the files that should be compiled because of the preloading.

@JesseKoldewijn

JasperAlexander on Jun 20, 2023

The same problem continues to be discussed here, but still no solution has been found. https://github.com/vercel/next.js/discussions/49607

yasincandev on Jul 3, 2023

It’s 2024 and I’m still getting this.

m-sadegh-sh on Mar 11, 2024

I’m hitting this issue as well. Hope it gets resolved soon! 🙏

arrowtype on Oct 9, 2023

And what about importing the css inside a layout instead of a page? Have you tried that by chance? I’ll have a look at it somewhere tomorrow nontheless but would like to know if this behavior also shows up when the css import happens on a layout instead of a page.👍

When you move the CSS import from child/page.tsx to child/layout.tsx, you’ll get the same warning. Probably because child/layout.tsx is also preloaded when linking to the page.

JasperAlexander on Jun 20, 2023

@JesseKoldewijn Surprisingly I don’t see the warning anymore. It’s on the latest Next.js version (14.1.3).

m-sadegh-sh on Mar 14, 2024