How to fix link preload warning in Next.js app? #49607

yasincandev · 2023-05-10T13:37:36Z

yasincandev
May 10, 2023

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

besal101 · 2023-05-12T07:57:40Z

besal101
May 12, 2023

Any fix to this ?? I am also getting the same issue

12 replies

rakibul-islam-hasib Sep 28, 2023

@curiousmind04 Its working

Kawan-idres Dec 3, 2023

i have the smae issue in "next": "^14.0.1", any one can help

SalahAdDin Mar 5, 2024

@yasincandev Why didn't you open a issue?

nicitaacom Mar 6, 2024

@yasincandev +
You may open issue about this

geekskai Apr 24, 2024

preload: false,

yasincandev · 2023-05-12T10:18:28Z

yasincandev
May 12, 2023
Author

Still dealing with the issue.

3 replies

raytawil-masterfulai Jun 1, 2023

Do you face this issue both locally and when deploying to Vercel? Or only one of those?

ahmet-ustun Jul 24, 2023

In my case, the issue is appearing only locally. I haven't experienced it in the deployed version.

arijit08 Jan 26, 2024

in my case i am only facing it when i build/deploy, not in the dev version

omarfarache · 2023-05-12T14:15:24Z

omarfarache
May 12, 2023

2 replies

yasincandev May 12, 2023
Author

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.

omarfarache May 12, 2023

I have the same issue before because vscode autocomplete , try it

hammadqurashi · 2023-05-13T09:43:52Z

hammadqurashi
May 13, 2023

same issue here in next.js version 14.2.0

0 replies

mandorakannu · 2023-05-13T15:35:35Z

mandorakannu
May 13, 2023

This error is coming in production or not?

4 replies

hammadqurashi May 13, 2023

No! I haven't tried it in production yet, but it is coming in development mode.

mandorakannu May 13, 2023

can you share the repo link?

yasincandev May 13, 2023
Author

When i build it still gives warning

arijit08 Jan 26, 2024

for me it is only coming in production.

Stefa093 · 2023-05-13T16:57:30Z

Stefa093
May 13, 2023

I'm having the same error and I'm only with Footer component :/ I'm not done with the whole website

8 replies

mandorakannu May 14, 2023

The Layout from app

import Nav from '@/components/Nav';
import Footer from '@/components/Footer';

import '../styles/globals.css';


export const metadata = {
  title: 'Tu aliado en Renting Tecnológico | Compurent',
  openGraph: {
    title: 'Compurent Home',
    description:
      'Compurent te ofrece servicio de alquiler de computadores para tu empresa, con plazos de hasta 36 meses y soluciones en la nube ¡Empieza a ahorrar hoy!',
    url: 'https://compurent.com.co/', //pending mark as canonical
    siteName: 'Compurent',
    locale: 'es-CO',
    type: 'website',
  },
  keywords: [
    'alquilar tecnología',
    'compurent',
    'alquiler de computo',
    'alquiler de servidores',
    'alquiler de almacenamiento',
  ],
  icons: '/icon.png',
};

export default function RootLayout({ children }) {
  return (
    <html lang="es">
      <body className="w-full">
        <main className="">
          <Nav />
          {children}
          <Footer />
        </main>
      </body>
    </html>
  );
}

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

`

yasincandev May 15, 2023
Author

What is the point of this changes?

Stefa093 May 15, 2023

none :/ i'm still having the issue with the preload thing

mandorakannu May 16, 2023

Maybe the issue occur only in localhost, try to push code on vercel or netlify then check the warning

DN92 Jun 20, 2023

@Kannu-Mondora What do CSS modules have to do with this issue.

idris95 · 2023-05-17T06:12:23Z

idris95
May 17, 2023

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 :)

2 replies

hariprasadoo May 18, 2023

That is true in my case!
I had used import { GoAlert, GoCloudDownload, GoDatabase } from "react-icons/go";
it been fixed after removing the react-icons import.

ChetSocio May 25, 2023

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

liuhe2020 · 2023-05-17T21:43:32Z

liuhe2020
May 17, 2023

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.

1 reply

yasincandev May 18, 2023
Author

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

Romancero · 2023-05-19T02:26:09Z

Romancero
May 19, 2023

The warning is given by the preloading of CSS modules through the Link component.

1 reply

yasincandev May 19, 2023
Author

Do you have any solutions?

d4v44khuu · 2023-05-20T16:08:37Z

d4v44khuu
May 20, 2023

same issue here in next.js version 13.4.3

0 replies

alireza-constantin · 2023-05-20T21:05:41Z

alireza-constantin
May 20, 2023

had the same issue, removed path alias import and the warning went away somehow.

// import "@/globals.css"
import "../../globals.css"

16 replies

Stonek79 Jan 28, 2024

Cool! It's work for me, but who can tell why?

ahmed0saber Jan 29, 2024

I'm already using ./ and ../ but the warning messages exist only on production.

ZurielR92 Feb 6, 2024

thanks you very much, it works for me too

nicitaacom Feb 7, 2024

Doesn't work for me cause I use Next.js 14 and there its by default
app/layout.tsx

import "./globals.css"

SalahAdDin Feb 8, 2024

It pulled out the global style module out of the folder and it didn't solve my issue.

HeppyAndriawan · 2023-05-21T11:33:04Z

HeppyAndriawan
May 21, 2023

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.
Anyone know how to fix this? Or maybe @leerob could help us for what should we do with this error?

1 reply

PeterCastilloG Jul 7, 2023

do you fix it ?

Bastien-Coeurway · 2023-05-21T14:41:55Z

Bastien-Coeurway
May 21, 2023

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.

2 replies

andpeicunha May 22, 2023

In my project I'm not using tailwind and I still have this same warning.

oscarvedo Jun 6, 2023

Currently using Chakra UI, and yes, same warning.

bobbymray · 2023-05-21T17:39:46Z

bobbymray
May 21, 2023

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...

5 replies

jerryle Jun 22, 2023

This actually works for me.

tippfelher Jul 23, 2023

Works like a charm, no way I would have solved it myself lol

knudcb28 Aug 22, 2023

This worked for me, thank you.

qwikag Aug 31, 2023

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:
`
import "./globals.css";
import { Inter} from "next/font/google";
const font = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-inter',})

export default function RootLayout({ children }) {
return (
<html lang="en" className={light my-Color ${font.variable}}>
...
I also did the tailwind config:
theme: {
extend: {
fontFamily: {
sans: ['var(--font-inter)'],
},

`

THE ERROR IS QUITE CLEAR
"
Please make sure it has an appropriate as value and it is preloaded intentionally
"

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 ???

TourFlow Aug 21, 2024

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...

Works!

andpeicunha · 2023-05-22T01:08:03Z

andpeicunha
May 22, 2023

Still testing but it seems to have worked for me.

1- In the app/layout.tsx file I remove the import fonts.
2- I created a font.ts file and imported the google/fonts into it. (see below)

import { Inter } from "next/font/google";

export const inter = Inter({
  subsets: ["latin"],
  display: "swap",
});

In the layout.tsx file I imported the font and used it normally in the className

"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

11 replies

douglasrcjames Jul 6, 2023

This actually did not work for me :/

PeterCastilloG Jul 7, 2023

i have the problen whit layout.css, idk if this will work in my case

AnthonySchneider2000 Oct 24, 2023

Did not work for me

juangoicochea Nov 30, 2023

It worked for me, thanks for posting!

MateoWartelle Aug 17, 2024

I was missing display: "swap",

thanks

nicitaacom · 2024-01-28T08:41:59Z

nicitaacom
Jan 28, 2024

I see the same issue

The most interesting when you go to the - https://hot-delivery.vercel.app/
You see no this issue

When you go to - https://nicitaa.com
You see this issue (in console)

0 replies

SalahAdDin · 2024-02-08T15:23:02Z

SalahAdDin
Feb 8, 2024

In my case, I am more worried about this issue:

I tried to fix it by moving the global.css file out of the locale file, but it didn't work.

Is it related to the same issue, the font files?

My current fonts.ts file is as follows:

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

0 replies

Fran-Gonzalez · 2024-04-11T13:00:07Z

Fran-Gonzalez
Apr 11, 2024

Importing globals.css on top of the root layout file fixed the warnings for me.

Using next 14.1.0

0 replies

ScreamZ · 2024-04-28T11:07:57Z

ScreamZ
Apr 28, 2024

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

2 replies

nicitaacom Apr 28, 2024

Did you tried preload:false?

e.g

const fireFoxes = localFont({
  src: "../public/FireFoxesDemoRegular.ttf",
  variable: "--font-secondary",
  preload: false,
})

ScreamZ May 1, 2024

Aren't we losing the benefit of preload if we remove the preload? ahah

ansman58 · 2024-04-30T12:26:15Z

ansman58
Apr 30, 2024

I have the same issue, however, mine is with Google Adsense. Has anyone been able to resolve this with Google AdSense?

  <Script
        async
        src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_GOOGLE_ADS_CLIENT_ID}`}
        crossOrigin="anonymous"
        strategy="afterInteractive"
      />

0 replies

Pedro-Laurenti · 2024-05-06T18:33:06Z

Pedro-Laurenti
May 6, 2024

Any fix to this? im facing the same problem in Next 14.2.3

3 replies

nicitaacom May 7, 2024

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
You may try to add preload: false,

Pedro-Laurenti May 8, 2024

In my case solved the problem inserting a valid google ADS tag

nicitaacom May 8, 2024

In my case solved the problem inserting a valid google ADS tag

Tell more about that
Add necessary code if needed

ArturdaSilvaRezende · 2024-05-19T02:19:42Z

ArturdaSilvaRezende
May 19, 2024

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.

0 replies

uigywnkiub · 2024-06-05T08:29:20Z

uigywnkiub
Jun 5, 2024

Next have so many bugs(

1 reply

hichemfantar Jul 10, 2024

Not just next, also present with a regular vite app e.g. https://dex-labs-leaderboards.vercel.app/

thlindustries · 2024-06-11T13:10:02Z

thlindustries
Jun 11, 2024

I'm still having this issue...
Just created a brand new next app latest

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:

Moving the font import to a separated file called font.ts
Using CSS variables instead of using font.className
Moving the className from to
Importing the font like import {Font as Font} from ''....
Adding a next Head component to import just like this:

<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:
The warnings:

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

1 reply

mtalero Aug 27, 2024

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.

Cauen · 2024-06-26T22:04:29Z

Cauen
Jun 26, 2024

Like thlindustries i was trying a lot of ways without success
Started working when ive created a layout.tsx that encapsulates the pages i want to apply the font. Obs: i'm using css variable with tailwind

/// 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.
✅ Was working at src/app/specific-dashboard/create/page.tsx
❌ But not was workign at src/app/specific-dashboard/[id]/page.tsx

With layout works for both

0 replies

yasincandev · 2024-07-02T17:13:54Z

yasincandev
Jul 2, 2024
Author

The more you save your code , the more the number of warnings increases, like a beard.

0 replies

codenimble · 2024-08-26T02:59:03Z

codenimble
Aug 26, 2024

2024 and still getting this.

0 replies

Voxz-ai · 2024-08-29T14:52:18Z

Voxz-ai
Aug 29, 2024

I was getting this message in my console when i would start my server.

Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme

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!

0 replies

jaicmatija · 2024-09-02T02:13:02Z

jaicmatija
Sep 2, 2024

In my case middleware caused it.
I used

const navigateToAliases = (walletHandle: string) => {
    router.push(`/alias-list?handle=${walletHandle}`);
  };

then added this to prevent if my url doesn't have query strings, to simply go back to previous page to set query string

if(req.nextUrl.pathname === "/alias-list") {
    return NextResponse.redirect(new URL("/accounts-page", req.url));
  }

So solution was to remove middleware on the page that had query string

0 replies

magnusriga · 2024-09-19T13:17:22Z

magnusriga
Sep 19, 2024

I get the same warning, but in relation to the Hero image at the top of the front page:

The resource https://images.ctfassets.net/xyz/abc.jpg 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.

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?

0 replies

How to fix link preload warning in Next.js app? #49607

Summary

Additional information

Example

Replies: 101 comments · 198 replies

yasincandev May 12, 2023 Author

yasincandev May 12, 2023 Author

yasincandev May 13, 2023 Author

yasincandev May 15, 2023 Author

yasincandev May 18, 2023 Author

yasincandev May 19, 2023 Author

Replies: 101 comments 198 replies

yasincandev
May 12, 2023
Author

yasincandev May 12, 2023
Author

yasincandev May 13, 2023
Author

yasincandev May 15, 2023
Author

yasincandev May 18, 2023
Author

yasincandev May 19, 2023
Author