Next.js: Preloaded js chunks not being used by browser.

Created on 20 Mar 2020 · 13Comments · Source: vercel/next.js

Bug report

Describe the bug

The preloaded js chunks don't seem to be used by the browser and are redundant even with crossorigin attribute added.

Warnings:
A preload  was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preload  was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.
A preload  was found for "https://***/_next/static/chunks/***.js" but was not used by the browser. Check that you are using the `crossorigin` attribute properly.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Build for production.
Run site through lighthouse.
See error

Expected behavior

A clear and concise description of what you expected to happen.

The preload link should work without any complains from lighthouse otherwise is it even called correctly?

Screenshots

If applicable, add screenshots to help explain your problem.

System information

Version of Next.js: [9.3.1]

Additional context

Add any other context about the problem here.

please add a complete reproduction

Source

tankpower1

👍7

Most helpful comment

NextJS official doc got the same issue.
https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started

pinkiebala on 3 Jul 2020

👍25

All 13 comments

A complete reproduction is needed.

timneutkens on 20 Mar 2020

I'm just building and uploading my project in order to test in on Pagespeed insights, the error occurs in the passed audits -> Preload key requests section. At this time i cannot give a complete reproduction. It's a simple build with v9.3.1 default behaviour.

tankpower1 on 20 Mar 2020

i have same error, https://github.com/drenther/next-pwa and check same step by tankpower1

nguyendangkhanh on 25 Mar 2020

Isn't it solved by this https://github.com/zeit/next.js/blob/4ce095df89139bc1dc777465de717a6cb545a923/packages/next/README.md#cdn-support-with-asset-prefix ?

<Head crossOrigin="anonymous">...</Head>
<body>
   <Main/>
   <NextScript crossOrigin="anonymous"/>
</body>

StarpTech on 13 Apr 2020

I've tried that exact solution and it didn't seem to change anything.

tankpower1 on 13 Apr 2020

Then only a complete and minimal reproduction can help.

StarpTech on 13 Apr 2020

Can confirm i'm seeing this as well.

The links are for pages that im linking to using <Link href="/my-page-name" /> as described in the docs. If I remove the links then I don't see the warning in the page audit anymore. I have crossOrigin: "anonymous" in my next.config.js and im on [email protected]. Site is deployed using serverless-nextjs-component