How to fix link preload warning in Next.js app? #49607
Replies: 103 comments 201 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.
-
Works! |
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.
-
|
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.
-
|
I was missing thanks |
Beta Was this translation helpful? Give feedback.
-
|
Importing
|
Beta Was this translation helpful? Give feedback.
-
|
Yep, this simple trick worked for me 👍 |
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.
-
|
I managed to solve this problem in the following way In my component, I used the "module" pattern from Next to create the CSS for my component. As mentioned in a response I saw somewhere (I don't remember exactly where), this problem was occurring due to multiple CSS requests caused by the nesting of elements. So, I simply removed the "styles.modules" from the elements and used the conventional way of applying CSS classes in the component. This solved the problem, and everything is working fine now.
|
Beta Was this translation helpful? Give feedback.
-
|
Next have so many bugs( |
Beta Was this translation helpful? Give feedback.
-
|
Not just next, also present with a regular vite app e.g. https://dex-labs-leaderboards.vercel.app/ |
Beta Was this translation helpful? Give feedback.
-
|
I'm still having this issue... Added only the poppins font from google/fonts and there it's, I'm importing 6 different weights and there're 6 warnings... I've tried:
<Head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> </Head>Nothing of those solutions solved my problem and I'm still with the issue... Removing the preload from the font initialization works but we lose the benefit of preloading a font and it could cause negative points on the page SEO so isn't a solution Here is how it's: My global.css: My layout.tsx file: My font.ts: My project structure: I'm going to stop trying to fix this for now because it's taking me a precious time for something that doesn't has much value, if I find a solution I'll come back |
Beta Was this translation helpful? Give feedback.
-
|
Quite late to reply, but in case someone else run into the same issue. Your getting this error because you're a passing the font to the html tag as a template literals, you should pass it to the body instead, like the following code: import "./globals.css";
import type { Metadata } from "next";
// you can import the font directly here or from your custom file
import { Poppins } from "next/font/google";
// Then if you imported here then you can add your attributes
const poppins = Poppins({display: "swap", weight: ["100", "200", "500"], subsets: ["latin"]});
export const metadata: Metadata = {
title: "",
description: "",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={poppins.className}> {/* --> Then pass the font to the body */}
{children}
</body>
</html>
);
}Clean cache and reload your page. Let us all know if that solve your issue. |
Beta Was this translation helpful? Give feedback.
-
does not fix it. Also have the same issue with google fonts. |
Beta Was this translation helpful? Give feedback.
-
|
Like thlindustries i was trying a lot of ways without success /// src/app/specific-dashboard/layout.tsx
'use client'
import { Roboto } from 'next/font/google'
import { cn } from '@/utils/style'
const fontRobotoSans = Roboto({
weight: ['100', '300', '400', '500'],
style: ['normal', 'italic'],
subsets: ['latin'],
variable: '--font-roboto',
display: 'swap',
})
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className={cn('font-roboto-sans', fontRobotoSans.variable)}>
{children}
</div>
)
}My bug scenario was using font at page level. With layout works for both |
Beta Was this translation helpful? Give feedback.
-
|
The more you save your code , the more the number of warnings increases, like a beard. |
Beta Was this translation helpful? Give feedback.
-
|
2024 and still getting this. |
Beta Was this translation helpful? Give feedback.
-
|
I was getting this message in my console when i would start my server. Browserslist: caniuse-lite is outdated. Please run: Once i ran npx update-browserslist-db@latest and updated my browerslist the warnings went away. I had tried everything else in this thread to no avail. Hopefully this helps some of you. Cheers! |
Beta Was this translation helpful? Give feedback.
-
|
In my case middleware caused it. then added this to prevent if my url doesn't have query strings, to simply go back to previous page to set query string So solution was to remove middleware on the page that had query string |
Beta Was this translation helpful? Give feedback.
-
|
I get the same warning, but in relation to the Hero image at the top of the front page:
It is incorrect that the image is not used, as it is the main image on the front-page. Anyone seeing the same, i.e. the error on images? |
Beta Was this translation helpful? Give feedback.
-
|
For my case, i just removed "import React from 'react'" from the top of my page: |
Beta Was this translation helpful? Give feedback.
-
|
I followed all the suggestions provided by the developer, but unfortunately, I couldn't find a solution to fix my error. Problem in Text Form :- |
Beta Was this translation helpful? Give feedback.
-
|
Try removing class styles from link tag |
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