I've built a Next.js app that uses dynamic routing and I'm noticing some strange behavior with the <Link> prefetches.
Occasionally (usually after rebuilding but not always) my app starts returning 404s for all prefetches on a given page. If I follow a link, the next page loads but again, all the prefetches on that page start to 404. This problem will go away after refreshing the page several times but this is not always consistent.
The breaks seem to happen exclusively on my dynamic routes, using getStaticProps and content revalidation every second. Below is an example of how I've structured my Link, note tripname would be a dynamic value.
<Link href={`/trip/${tripname)}`}>
<a>
<Card className={classes.tripCardRoot} />
</a>
</Link>
This is what happens when the page loads.
Edit:
I spent the day digging into this and have some additional details to better describe what I'm experiencing. This error is definitely related to when I build my app and is only occurring on pages that are being generated after the build process via the fallback:true property in my getStaticPaths() function.
Pages that are explicitly built (e.g. in the paths array) do not seem to exhibit this problem. I'm not sure if this makes sense but it seems as though the first few loads of a given page revert back to a version from the previous build rather than a fallback page. It's only after reloading a page a few times that the fallback functionality actually kicks in and next builds that page as part of the current build. From that point on everything seems to work as expected until the next build where the whole ordeal starts fresh.
Also included a screenshot of the console log indicating that there's an issue in the /_next/data/... directory. Though I'm not sure what this error is actually referring to.
I had the exact same problem... After 2 days trial/error I finally found a solution. But it's not the best solution IMO.
I updated all my <Link /> components from next/link and disabled the prefetch option. After this change I don't see any 404 errors in my dev-tools network-tab anymore. All GET-requests for the pre-generated JSON data will only take place on hover now, and magically they now don't result in a 404...
I know it is not the best solution, but at least the problem is gone... Hopefully somebody will reply with a better solution!
Related
I've seen a few of these posts on StackOverflow already, though I really can't seem to get mine working no matter what I try.
I am trying to host a webpage, though when deploying I am left with a blank screen, and the following error in the console:
Uncaught SyntaxError: Unexpected token '<' in main.e7fa3b75.js:1
I've seen posts which suggest it is a problem with the pathing to my static files, though I cant seem to sort it out.
This post suggests I should remove an extension from my package.json, though I don't use that extension.
This post says I should remove the repository name from the homepage field in the package.json, though that also wouldn't work for me.
I'm out of ideas, here is the repo, if someone doesn't mind taking a look?
I have got it to render the website for a few moments, only to disappear to the same white screen moments later. There are no problems if I run the page on local host.
UPDATE
I have since got the application to host, but only if I explicitly visit the URL of the landing page.
https://jcdw99.github.io/
From the landing page there is a /papers route which can be reached from the navbar. If you press on the button, the page renders. Though, if you try to explicitly view the page, by manually visiting
https://jcdw99.github.io/papers it returns a 404.
Any help?
Try <HashRouter> instead of <BrowserRouter> since Github pages don't support HTML5 history API (see notes on client side routing) but React BrowserRouter uses it. See this question with similar problem.
One observation is if you navigate directly using # in the url, like https://jcdw99.github.io/#/papers it works!
Intro
Apologies for not being able to provide a reproducible example. Our team is not able to reproduce the bug reliably. We have been investigating the bug for almost a week now, but can't seem to make any headway. We just rolled out our next.js based headless Shopify store (i.e. use next.js for the frontend and Shopify for everything starting from the checkout).
This bug is the strangest thing I have seen with next.js so far and any pointers towards solving the problem are more than appreciated.
Note:
You can navigate to www.everdrop.ch/it and open console to see some some broken links. However, since this is production, we obviously try to fix them as soon as possible.
Problem:
Almost every time we deploy a new version we would get to see some seemingly random 404s in the console, for when next is trying to prefetch Links.
The 404's are always of the form https://domain/_next/data/<DEPLOYMENT>/<PATH>/slug.json where sometimes PATH is e.g. category-pages and sometimes it's empty.
Observation 1
When clicking one of the broken links in console (the .json, I would get a 404:
Navigating to the broken pages on client side will also give a 404
However, when curl -I -L I would get a 200
Observation 2
When checking the Output data in Vercel
everything works like a charm
Note that the URL is different though. It is the same deployment but at a different URL.
Observation 3
The affected Links are seemingly random. However, some seem to be more likely to be affected than others.
Observation 4
Navigating to the page and then refreshing or directly accesing the page does produce the properly rendered page. Suprisingly enough this also results (for most pages that is) in a disapearance of the initital error.
Observation 5
Rerunning the deployment on vercel oftentimes fixes the problem and many of the broken links will then randomly work. Sometimes this leads to other broken links though.
Background & Stack
We use Storyblok and Shopify as data providers to query during build time. Shopify for product data and Storyblok for page and content data. All affected pages so far have been pages where we pull data from Storyblok during build time (which are all pages other than search and product pages).
We use next i18next for multi-language localisation. We use ENV variables to control where data is coming from to build our different stores.
Many people have reached out to me on LinkedIn asking how we ultimately solved the problem at hand.
I think, generally speaking, the problem occurs when at build-time, a page build fails (i.e. when you are running into API limits). This is especially problematic in combination with
fallback: true (https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-true)
As I think, pages that were built but failed will not get updated later on.
Our Solution
For us, we were able to solve it with:
preventing errors at build-time (we implemented a cache, but your errors might be different)
setting revalidate param, so that even if pages fail, they will get rebuilt
fallback: blocking (https://nextjs.org/docs/api-reference/data-fetching/get-static-paths#fallback-blocking)
notFound: true (https://nextjs.org/docs/api-reference/data-fetching/get-static-props#notfound)
Some days ago I was working on an issue for my job where a page on React couldn't "catch" an error when someone tried to navigate using a bad URL that had the percentage sign (%) that can't be decoded.
The React project uses react-router-dom to handle navigation by showing different views when accessing different URL's (it even has a 404 route when it has no matching routes), and the struture looks very similar to React Router's 404 example, here's the link where you can try for yourself adding /% to the URL from the sandbox's browser and understand in a better way the problem.
In my local-development scenario the page only shows the stack trace in the following image (also check the console output).
I understand that it if someone provides a bad URL that can't be decoded this error will throw and therefore the page will not run. I've been looking for a while and haven't found nothing related to how to catch it on React (I'm not sure if that's really possible).
Any suggestions are welcome!
I have a react app that has several pages. When I refresh the page, I can successfully link to one other page. Subsequent links update the url address with the reference to the new page, but only load after the page refreshes.
Error messages in different browsers differ.
In chrome:
In firefox:
In safari:
I have seen this post which has very long, complicated suggestions about routing. I'm not sure if this is my problem yet, so have not yet explored the ideas set out as solutions.
2nd screenshot shows that something tries to load /your-path-to-fontawesome/css/all.css and most probably you don't have that file at that location (therefore receiving html instead). You need to config something somewhere in code, connected to fontawesome
Two separate issues here:
First, the combination ERR_BLOCKED_BY_CLIENT and ERR_UNSAFE_REDIRECT are usually the result of a browser extension, or the browser itself, blocking cross-site tracking. This would also make sense why you're only seeing it in a particular browser.
Second, the invalid MIME type for your CSS typically comes from one of two things. The most common, and easiest to fix, is that the path to that file is wrong. In this case, the server responds with a 404 page, giving you the invalid MIME type of text/html.
Another possibility is a library adding comments to the top of a CSS file that is meant to be minified before being sent to the client. Here's a more in-depth post about this issue. Would definitely double-check the file path, though, before digging deeper into this possibility. An easy way to check would just be to take that URL from the MIME type error and navigate to it in your browser to see what you get.
Not sure what i am missing, but I have pushState working on my Backbone based app, where I could click around and have my URL look like www.example.com/route_specified, however if i try to go directly to that page it shows up as not found. If I do www.example.com/#route_specified it works, and quickly changes back to www.example.com/route_specified on the address bar
I am guessing i need to do something in Apache to handle this and make sure that all calls resolve to the index or something like that, but can't find explanation.
Correct. Think about it this way without pushstate enabled. Your server is still trying to serve the page at that route. Since it cannot find the specified document at that location, it throws a 404.
Technically speaking, your server should still produce some sort of result at the url location, then have Backbone take over. In it's simplest form, this is called progressive enhancement. The server should still serve some sort of static page with critical info, which will eliminate issues you will have with SEO. Work your site/app with javascript disabled, serving only the relevant data. Then have Backbone takeover. I have just come across Mashable's redesign, and they integrate progressive enhancement extremely well with Backbone.
If SEO is not a concern, you could always redirect the user to the index page. Just remember that search engines will only index your app page then. If your content is being served dynamically, there wont be any data to index.
Hope this helps.
Thanks
Tyrone