How to fix link preload warning in Next.js app? #49607
Replies: 92 comments 194 replies
-
|
Any fix to this ?? I am also getting the same issue |
Beta Was this translation helpful? Give feedback.
-
|
@curiousmind04 Its working |
Beta Was this translation helpful? Give feedback.
-
|
i have the smae issue in "next": "^14.0.1", any one can help |
Beta Was this translation helpful? Give feedback.
-
|
@yasincandev Why didn't you open a issue? |
Beta Was this translation helpful? Give feedback.
-
|
@yasincandev + |
Beta Was this translation helpful? Give feedback.
-
|
preload: false,
|
Beta Was this translation helpful? Give feedback.
-
|
Still dealing with the issue. |
Beta Was this translation helpful? Give feedback.
-
|
Do you face this issue both locally and when deploying to Vercel? Or only one of those? |
Beta Was this translation helpful? Give feedback.
-
|
In my case, the issue is appearing only locally. I haven't experienced it in the deployed version. |
Beta Was this translation helpful? Give feedback.
-
|
in my case i am only facing it when i build/deploy, not in the dev version |
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
|
This warning occured 2 days ago and i went back to old versions of my app with git reset and it was still happening. So the destructing props is not related i think. |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue before because vscode autocomplete , try it |
Beta Was this translation helpful? Give feedback.
-
|
same issue here in next.js version 14.2.0 |
Beta Was this translation helpful? Give feedback.
-
|
This error is coming in production or not? |
Beta Was this translation helpful? Give feedback.
-
|
No! I haven't tried it in production yet, but it is coming in development mode. |
Beta Was this translation helpful? Give feedback.
-
|
can you share the repo link? |
Beta Was this translation helpful? Give feedback.
-
|
When i build it still gives warning |
Beta Was this translation helpful? Give feedback.
-
|
for me it is only coming in production. |
Beta Was this translation helpful? Give feedback.
-
|
I'm having the same error and I'm only with Footer component :/ I'm not done with the whole website |
Beta Was this translation helpful? Give feedback.
-
Try to remove tag in layout.tsx/layout.js and remove body tag className and add globals.css inside the app directory not in any styles folder.Use fileName.module.css in Footer.js/Footer.tsx file. try this: import styles from "@styles/Footer.module.css" // create this file and import in footer file.Remove this className : <footer className="w-full"> <div className="home__bgFooter"></div>
use this: ` // your JSX` |
Beta Was this translation helpful? Give feedback.
-
|
What is the point of this changes? |
Beta Was this translation helpful? Give feedback.
-
|
none :/ i'm still having the issue with the preload thing |
Beta Was this translation helpful? Give feedback.
-
|
Maybe the issue occur only in localhost, try to push code on vercel or netlify then check the warning |
Beta Was this translation helpful? Give feedback.
-
|
@Kannu-Mondora What do CSS modules have to do with this issue. |
Beta Was this translation helpful? Give feedback.
-
|
This issue actually coming from the next/font/google component. According to the warning preloaded link must have the appropriate as property whether this is a style or script link. I hope the next.js team will provide the solution soon :) |
Beta Was this translation helpful? Give feedback.
-
|
That is true in my case! |
Beta Was this translation helpful? Give feedback.
-
|
Worked in my side! I removed the default font import in my layout.tsx file, restarted server and cleared the browser cache .The warning is gone now : ) I don't know why did it occured but its really annoying during debugging code |
Beta Was this translation helpful? Give feedback.
-
|
I thought it was a font issue so I removed const inter = Inter({ subsets: ['latin'] }); But still same warning. I also noticed that I loads a bunch of duplicate stylesheets, each warning adds another stylesheet to frame(see image). There is no warning once deployed on Vercel though. |
Beta Was this translation helpful? Give feedback.
-
|
First I thought it was a problem with my project but i created fresh next app with create next app and still gives same warning |
Beta Was this translation helpful? Give feedback.
-
|
The warning is given by the preloading of CSS modules through the Link component. |
Beta Was this translation helpful? Give feedback.
-
|
Do you have any solutions? |
Beta Was this translation helpful? Give feedback.
-
|
same issue here in next.js version 13.4.3 |
Beta Was this translation helpful? Give feedback.
-
|
had the same issue, removed path alias import and the warning went away somehow. // import "@/globals.css"
import "../../globals.css" |
Beta Was this translation helpful? Give feedback.
-
|
Cool! It's work for me, but who can tell why? |
Beta Was this translation helpful? Give feedback.
-
|
I'm already using ./ and ../ but the warning messages exist only on production. |
Beta Was this translation helpful? Give feedback.
-
|
thanks you very much, it works for me too |
Beta Was this translation helpful? Give feedback.
-
|
Doesn't work for me cause I use Next.js 14 and there its by default import "./globals.css" |
Beta Was this translation helpful? Give feedback.
-
|
It pulled out the global style module out of the folder and it didn't solve my issue. |
Beta Was this translation helpful? Give feedback.
-
|
I have got the same problem with Next v.13.4.1. It's "REALLY ANNOYING" for debugging in DevTool.
The error in the the DevTool said that the link suppose to have "as" property in the CSS styles tag from the tag. But as we can see on my picture Next.js generate link Stylesheet but not include "as" property. There is the error.
I have done as Documentation said to import CSS Module like this image but error still show up:
Are this a bug from App Directory? Because when I use Page Directory before this error is not happened. |
Beta Was this translation helpful? Give feedback.
-
|
do you fix it ? |
Beta Was this translation helpful? Give feedback.
-
|
From what I just tested, it may be related to tailwind. When creating a new project with npx create-next-app using the tailwind option, I get this warning : But with the tailwind option at no, the project is normal. |
Beta Was this translation helpful? Give feedback.
-
|
In my project I'm not using tailwind and I still have this same warning. |
Beta Was this translation helpful? Give feedback.
-
|
Currently using Chakra UI, and yes, same warning. |
Beta Was this translation helpful? Give feedback.
-
|
If the preload warnings related to the next/font/google component are ruining your day, you can try the CSS variable approach to font handling as described in the section regarding Using Multiple Fonts in the NextJS Font Optimization docs. Worked for me. See the code examples under the paragraph that begins with Alternatively, you can create a CSS variable... |
Beta Was this translation helpful? Give feedback.
-
|
This actually works for me. |
Beta Was this translation helpful? Give feedback.
-
|
Works like a charm, no way I would have solved it myself lol |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me, thank you. |
Beta Was this translation helpful? Give feedback.
-
|
This did not work for me. It does not address/discuss the actual error relating to the as value in the preload. Could you please shed more light on your answer, why you did what you did? I followed the tailwind approach: export default function RootLayout({ children }) { ` THE ERROR IS QUITE CLEAR And it refers to layout.css and page.css This would seem like a task for next.js team. ALSO - it occurs after a "Fast Refresh" but maybe us developers should have more control over what ends up in the HTML ??? |
Beta Was this translation helpful? Give feedback.
-
|
Still testing but it seems to have worked for me. 1- In the import { Inter } from "next/font/google";
export const inter = Inter({
subsets: ["latin"],
display: "swap",
});In the "use client";
import "./global.css";
import AuthContext from "./lib/authContext";
// aqui eu importei a font que quero usar, inclusive com esse método posso usar utras fontes em outras partes da mesma forma
// here I imported the font I want to use, even with this method I can use other fonts in other parts in the same way
import { inter } from "@/app/styles/fonts";
export interface RootLayoutProps {
children: React.ReactNode;
}
export default function RootLayout({ children }: RootLayoutProps) {
return (
<html>
<body className={inter.className}> //normal use in className - uso normal no className
<AuthContext>{children}</AuthContext>
</body>
</html>
);
}Espero que ajude, pra mim está funcionando / I hope this helps, it's working for me |
Beta Was this translation helpful? Give feedback.
-
|
it worked for me also. It changed behavior from 100500 warnings to 2. But the warning remain. |
Beta Was this translation helpful? Give feedback.
-
|
This actually did not work for me :/ |
Beta Was this translation helpful? Give feedback.
-
|
i have the problen whit layout.css, idk if this will work in my case |
Beta Was this translation helpful? Give feedback.
-
|
Did not work for me |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me, thanks for posting! |
Beta Was this translation helpful? Give feedback.
-
|
If you're loading a font like the code below, changing the // 🟡 cause warnings
<link rel="preload" href="https://font-url.woff" as="font" />// ✅ works without warnings
<link rel="prefetch" href="https://font-url.woff" as="font" /> |
Beta Was this translation helpful? Give feedback.
-
|
how could we add in layout.tsx ? because the font is load throught import { Poppins, Josefin_Sans } from 'next/font/google'; |
Beta Was this translation helpful? Give feedback.
-
|
thank you it's worked. |
Beta Was this translation helpful? Give feedback.
-
|
This issue randomly appeared for me with the |
Beta Was this translation helpful? Give feedback.
-
|
Today I had the same issue, came here and read it's probably from a font problem. I noticed the warning when navigating in the pages through the navbar. Next 13.5.4 |
Beta Was this translation helpful? Give feedback.
-
|
This worked for me just now. Next v14.0.1. Seems silly but it works! |
Beta Was this translation helpful? Give feedback.
-
|
This is the solution that worked for me, after hours of reading this thread :P BTW, I upgraded to 14.0.4 (I was using 13.4) with this official guide |
Beta Was this translation helpful? Give feedback.
-
|
In my case It loads the style from the 
Also, when I start on dashboard and Im logged It renders the layout 5 times.. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
No mate, seems it didn't worked. Even on first reload of the page layout is loaded twice. I think is ok, but I think there is a bug/problem when changing between different flows/segments. I think Its ok while I maintain in the same (route group) The problem is when I change from authenticated to authenticated and get redirected. The layout starts loading many times. I have some fixes in my head around this but would be ideal that this does not happening. |
Beta Was this translation helpful? Give feedback.
-
This worked for me! |
Beta Was this translation helpful? Give feedback.
-
|
Just deployed and this is not happening in prod so I think its fine 🙌 |
Beta Was this translation helpful? Give feedback.
-
|
really it solved in deployment without costume in thing? i use V14.0.3 but still the same |
Beta Was this translation helpful? Give feedback.
-
What version of next.js are you on? |
Beta Was this translation helpful? Give feedback.
-
|
14.0.4 |
Beta Was this translation helpful? Give feedback.
-
|
I had a same issue but I solved it with a simple solution. |
Beta Was this translation helpful? Give feedback.
-
|
This fix worked for me. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
this fix my issue in next 13.4.12 |
Beta Was this translation helpful? Give feedback.
-
|
display:'swap' cause infinity loading for me
|
Beta Was this translation helpful? Give feedback.
-
|
As much as I tried to remove this warning, and that's what I came to. If you use a font in a component that does not load when you visit your site, it gives this error. But if you use the font as a variable for css, the error will disappear. In my case, preload is still working. What have I done for myself: Add
|
Beta Was this translation helpful? Give feedback.
-
|
It didn't work for me. |
Beta Was this translation helpful? Give feedback.
-
|
I got this html,
body,
:root {
list-style: none;
height: 100%;
background-color: #202020;
font-family: var(--font-primary);
}tailwind.config.ts theme: {
fontFamily: {
primary: ["var(--font-primary)", "sans-serif"],
secondary: ["var(--font-secondary)", "sans-serif"],
},app/layout.tsx import { Inter } from "next/font/google"
const inter = Inter({ subsets: ["latin"], variable: "--font-primary", preload: true })
import localFont from "next/font/local"
const fireFoxes = localFont({ src: "../public/FireFoxesDemoRegular.ttf", variable: "--font-secondary", preload: true })
<html lang="en">
<link rel="icon" href="/favicon.ico" sizes="any" />
<body className={(inter.variable, fireFoxes.variable)}> |
Beta Was this translation helpful? Give feedback.
-
|
Also you don't need use .variable because it will also set as classname during SSR (and after) |
Beta Was this translation helpful? Give feedback.
-
I had this same issue and mine was also in the build version, but adding prefetch={false} to my links worked Next version: 14.0.4 |
Beta Was this translation helpful? Give feedback.
-
|
I had similar problem with fonts:
I just removed unused font declarations. Before: import { Inter, Roboto, Sora } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
})
export const roboto = Roboto({
subsets: ['latin'],
display: 'swap',
variable: '--font-roboto',
weight: '500'
})
export const sora = Sora({
subsets: ['latin'],
display: 'swap',
variable: '--font-sora'
})and after (I use only Inter font in my NextJS project): import { Inter, Roboto, Sora } from 'next/font/google'
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
})It was acording to the official doccumentation (using multiple fonts in NextJS Vercel Project): |
Beta Was this translation helpful? Give feedback.
-
|
I see the same issue The most interesting when you go to the - https://hot-delivery.vercel.app/ When you go to - https://nicitaa.com |
Beta Was this translation helpful? Give feedback.
-
|
In my case, I am more worried about this issue: Is it related to the same issue, the font files? My current import { Noto_Serif } from "next/font/google";
import localFont from "next/font/local";
const notoSerif = Noto_Serif({
/**
* Subsets can be "cyrillic", "cyrillic-ext", "greek", "greek-ext", "latin", "latin-ext", "vietnamese"
*/
subsets: ["latin"],
weight: ["400", "700"],
style: ["normal", "italic"],
display: "swap",
variable: "--font-noto-serif",
});
const trt = localFont({
src: [
{
path: "../../public/fonts/TRT-Light.woff2",
weight: "300",
style: "normal",
},
{
path: "../../public/fonts/TRT-LightItalic.woff2",
weight: "300",
style: "italic",
},
{
path: "../../public/fonts/TRT-Regular.woff2",
weight: "400",
style: "normal",
},
{
path: "../../public/fonts/TRT-RegularItalic.woff2",
weight: "400",
style: "italic",
},
{
path: "../../public/fonts/TRT-Medium.woff2",
weight: "500",
style: "normal",
},
{
path: "../../public/fonts/TRT-MediumItalic.woff2",
weight: "500",
style: "italic",
},
{
path: "../../public/fonts/TRT-Bold.woff2",
weight: "700",
style: "normal",
},
{
path: "../../public/fonts/TRT-BoldItalic.woff2",
weight: "700",
style: "italic",
},
],
display: "swap",
variable: "--font-trt",
});
export const fonts = { notoSerif, trt };Any help? Thanks |
Beta Was this translation helpful? Give feedback.
-
|
Importing
|
Beta Was this translation helpful? Give feedback.
-
|
Still having the issue, using Tailwind, custom font and google font import "./globals.css";
import type { Metadata } from "next";
import { Poppins } from "next/font/google";
import localFont from "next/font/local";
import { Header } from "@modules/ui/header/Header";
import { Footer } from "@modules/ui/footer/Footer";
const spartan = localFont({
display: "swap",
variable: "--font-spartan",
src: [
{
path: "./Spartan-Bold.ttf",
weight: "700",
},
{
path: "./Spartan-Medium.ttf",
weight: "500",
},
],
});
const poppins = Poppins({
subsets: ["latin"],
display: "swap",
weight: ["300", "500"],
variable: "--font-poppins",
});
export const metadata: Metadata = {
title: "",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="fr" className={`${spartan.variable} ${poppins.variable}`}>
<body className="flex min-h-screen flex-col font-sans">
<Header />
{children}
<Footer />
</body>
</html>
);
}After some second i got the warning in the console |
Beta Was this translation helpful? Give feedback.
-
|
Did you tried e.g const fireFoxes = localFont({
src: "../public/FireFoxesDemoRegular.ttf",
variable: "--font-secondary",
preload: false,
}) |
Beta Was this translation helpful? Give feedback.
-
|
Aren't we losing the benefit of preload if we remove the preload? ahah |
Beta Was this translation helpful? Give feedback.
-
|
I have the same issue, however, mine is with Google Adsense. Has anyone been able to resolve this with Google AdSense?
|
Beta Was this translation helpful? Give feedback.
-
|
Any fix to this? im facing the same problem in Next 14.2.3 |
Beta Was this translation helpful? Give feedback.
-
|
For me it happens randomly I tried this const fireFoxes = localFont({
src: "../public/FireFoxesDemoRegular.ttf",
variable: "--font-secondary",
preload: false,
})You may get this warning not only because of font |
Beta Was this translation helpful? Give feedback.
-
|
In my case solved the problem inserting a valid google ADS tag |
Beta Was this translation helpful? Give feedback.
-
Tell more about that |
Beta Was this translation helpful? Give feedback.
and others
-
Summary
I am developing a Next.js app with version 13.4 and I am getting this warning in the console:
The resource <URL> 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.The number of the error is increasing.
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions