nextjs - 💡(How to fix) Fix Link preload must have a valid `as` [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#84563Fetched 2026-04-08 02:18:59
View on GitHub
Comments
1
Participants
2
Timeline
5
Reactions
0
Timeline (top)
closed ×1commented ×1issue_type_added ×1labeled ×1

Root Cause

It appears because as="stylesheet" is not a valid as value. It should be style according to MDN.

Code Example

<link rel=preload> must have a valid `as` value

---

<link rel="preload" href="/_next/static/chunks/%5Broot-of-the-server%5D__02ec3763._.css" as="stylesheet"/>

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.20.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.17.1
Relevant Packages:
  next: 15.6.0-canary.45 // Latest available version is detected (15.6.0-canary.45).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/kind-elbakyan-fgg4tv?workspaceId=ws_NduBwxz3MLYn31fcaz2JTB

To Reproduce

  1. Import a .css file
  2. Start the application in dev mode
  3. A warning is logged for each css file:
<link rel=preload> must have a valid `as` value

Current vs. Expected behavior

Stylesheets should be correctly loaded, and not trigger a browser warning.

It appears because as="stylesheet" is not a valid as value. It should be style according to MDN.

<link rel="preload" href="/_next/static/chunks/%5Broot-of-the-server%5D__02ec3763._.css" as="stylesheet"/>

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.20.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 10.17.1
Relevant Packages:
  next: 15.6.0-canary.45 // Latest available version is detected (15.6.0-canary.45).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

The issue starts showing up in 15.6.0-canary.32

extent analysis

TL;DR

Update the as value in the link tag to style to fix the browser warning.

Guidance

  • Verify that the issue is caused by the incorrect as value by checking the browser console for the warning message.
  • Update the link tag to use as="style" instead of as="stylesheet" to fix the issue.
  • Check the Next.js documentation to see if there are any configuration options to automatically set the correct as value.
  • Test the application in different environments to ensure the fix works consistently.

Example

<link rel="preload" href="/_next/static/chunks/%5Broot-of-the-server%5D__02ec3763._.css" as="style"/>

Notes

The issue seems to be specific to Next.js version 15.6.0-canary.32 and later. The fix should work for all environments, but it's recommended to test it thoroughly.

Recommendation

Apply workaround: update the as value to style, as it is a simple and effective fix for the issue.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix Link preload must have a valid `as` [1 comments, 2 participants]