I am currently working on a Next.js application using version 13.4, and I've encountered a warning in the console:
After preloading the resource at <URL>, it was not used within a few seconds of the window's load event. Please ensure that it has an appropriate 'as' value and was intentionally preloaded.
The frequency of this error is on the rise.
Here is a screenshot of the console message: https://i.stack.imgur.com/ZyKYT.png
It appears that you may be preloading CSS files based on the warning image. When using preload, make sure to include the href and as attributes. It seems like the as attribute is missing in your code snippet.
Include it like so:
<link rel="preload" href="style.css" as="style" />
For more detailed information, please refer to this document
Dealing with a similar problem, I found that the issue stemmed from google fonts in my case. The solution I discovered was to include 'preload:true' when attempting to access the desired font.
For instance:
export const customFont = OpenSans({
subsets: ["latin"],
variable: "--font-custom",
preload: true,
});
In case you are using Next.js version 13 or above, it might be necessary to include the prefetch={false} attribute in a Link tag. By adding this step, one common issue is resolved. For instance, Link href="/portfolio" prefetch={false}
I encountered a similar issue related to fonts:
The preloaded font with link preload was not being utilized within a short timeframe. It's important to ensure all attributes of the preload tag are configured correctly.
To resolve this, I decided to remove any unused font declarations.
Previously, my code included:
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'
})
After making changes (now using only the Inter font in my NextJS project):
import { Inter } from 'next/font/google
export const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter'
})
This adjustment aligns with the recommendations outlined in the official documentation for utilizing multiple fonts in a NextJS Vercel Project:
https://nextjs.org/docs/app/building-your-application/optimizing/fonts#using-multiple-fonts
Has anyone come across a reliable javascript library that can retrieve the original style (not computed) of a specific element in the DOM? Essentially, I am looking for something that can provide results similar to what is displayed in Firebug's style ...
Does anyone know how to properly space out a ul in a navigation bar, with 5px padding on the right and left and the text evenly spaced in between? body { background: #ffffff; text-align: center; font-family: helvetica, arial, san ...
I am currently facing an issue where I want to initiate a browser download of an excel file that is generated in my backend. However, I am struggling to figure out how to pass this type of response. app.get('/all', function (req, res) { db.q ...
Check out the code I have below: http://jsfiddle.net/G8Ste/577/ I want the effect to expand in all directions, not just to the right and bottom. I've experimented with margin: 0, auto, and other CSS and HTML styles to center it, but nothing seems t ...
I am looking to center my content along the Y axis instead of only on the X axis. To prevent the page from expanding beyond its current size, I have applied the following CSS: html { overflow-y: hidden; overflow-x: hidden } What I want to achieve is havi ...
One of the buttons on my website has a hover effect that changes its opacity. This button is used to share information on Facebook. It's a simple feature to implement. Here is the CSS code: .social_vk, .social_fb { height: 38px; obj ...
Check out the live link provided below: I am attempting to add a border and later an arrow in the middle on hover in the menu. However, the current code places a border over the entire menu, with individual list items on top of that. #menu ul li { margin ...
I created a custom NavBar with a unique tab indicator implementation: indicator: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', }, <Tabs classes={{indicator: classes.indicator}} onChange={handleClickTab} value={value}> ...
Currently, I am in the process of developing a website using Strapi and Next.js. This project is based on the restaurant starter provided by strapi. However, I have come across an unusual problem while adding pages to the site... When I create a page with ...
I'm having an issue sending form data to MongoDB using Axios in the frontend. The API works when I send a post request using Postman, but it fails when coming from the frontend. Here's a screenshot of the error: Frontend Code: const res = aw ...
Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...
I have been utilizing the tinyMCE editor plugin, which transforms textareas into iframes and displays a toolbar at the top of the content. It has been functioning flawlessly. However, there are times when there are videos placed above the content. In such ...
I'm currently working with Zurb Foundation alongside Sass Compass, though this issue can extend to any CSS framework. Here's an example of the code I have: <div class="row"> <div class="small-6 column">...</div> <di ...
Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...
My latest project involves creating a chart view page that displays sales data. The chart is designed to update via REST API whenever the user modifies dimensions, filter values, or the time period. useEffect(async () => { let [startDate, endDate] = ...
After downloading Node.js for MAC OS from this link: http://nodejs.org/download/ (http://nodejs.org/dist/v0.10.29/node-v0.10.29.pkg), I needed to execute a JavaScript on Google Chrome. To do this, I utilized the following AppleScript code: do shell script ...
My element is able to slide in smoothly, but encounters trouble when attempting to slide back out. I suspect the issue lies within the syntax for "display: none". Any assistance or recommendations would be greatly appreciated, and feel free to request more ...
Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along. #banner { background:blue; color:white; position ...
Is there a way to create an image slider similar to the one on YouTube channels? I've noticed that when there are multiple videos on a channel, YouTube displays them in a slider with back and forth buttons to navigate through the videos that aren&apos ...
Is there a way to manipulate the array in imageCollection to achieve the format of the array in carouselPhotos as shown below? export default class HomeScreen extends Component { state = { imageCollection: [ { name: "P ...