Preload for css is found, but not used, because request credentials mode does not match

[howells]

I've only just started getting this problem with a new nextjs app, where css files aren't preloaded, and therefore not used at all:

A preload for 'https://*******.vercel.app/_next/static/css/db098983a22a0aa338df.css' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

I'm using sass modules, and this is with nextjs 9.5.3 and webpack 5 (but the same issue occurs with webpack 4). Any ideas?

[howells]

Just discovered this doesn't happen when I downgrade to 9.5.2, so it's a 9.5.3 issue.

[subwaymatch]

Same error in 9.5.3

[maickoldxd]

I'm still having this error in 9.5.2, also I have bootstrap + next sass

[egemon]

Error with 9.5.2

[vinamelody]

Also having this in 9.5.5

[niko20]

Same error in 10.0.0 with my app compiled

[timtyrrell]

😎

[cesarkohl]

I've added the attribute/value crossOrigin="anonymous" and the warning has gone.

<link rel="preload" href="/fonts/font.woff2" as="font" crossOrigin="anonymous" />

[alitnp]

lifesaver. thanks crossOrigin="anonymous" does the job.

[deepakchandel12]

I think it will work but just describe step. There are come many people and they not know How to add the attribute or value for fix this error. Please tell us fully or provide videos for easy. My website freefontsstore.com and there are not showing adsense ads because showing error preloader error, j error in insight..

[maickoldxd]

to have a crossOrigin="anonymous" in all link tags,
edit your next.config.js:
`
//If you have others plugins, use next-compose-plugins
const withPlugins = require('next-compose-plugins');
//In my case I use sass & pwa
const withSass = require('@zeit/next-sass')
const withPWA = require('next-pwa')

module.exports = withPlugins([withSass(
withPWA({
pwa: {
dest: 'public'
}
})
)],{
//Here you define your next js and webpack config
crossOrigin: 'anonymous',
}
`

[hirasso]

Only adding the attribute crossover crossorigin without any value should be enough already, as described here: https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload#cors-enabled_fetches

[johnjensenish]

I assume you mean the attribute crossorigin, and mentioning it for posterity.

I believe React/JSX requires crossOrigin="anonymous" because it doesn't treat that prop as a boolean.

[hirasso]

Oh right, of course crossorigin :) Thanks for pointing it out.

[guotie]

strange problem, why?