Hey been awhile since I thought of this post and came back since I was getting the same error randomly after I created a post filtering method that ran in the onMount hook based on which category was selected. Almost pulled all my hair out until I realized it was only rendering JSON for the 2 posts I was showing separately on the front page of my site.
Then it hit me, Sapper only renders routes for links it can follow during export. My post filter (as cool as it is) prevents Sapper from seeing those links during export. I assume this is only an issue with exported sites since all routes worked in dev even before my fix.
My workaround for this was to create an each block and loop through all my posts inside a div that was screen reader only (so it doesn't show on the front end, I also gave them tabindex="-1" just in case so they don't jump into tab order) having this hidden list of links allows Sapper to see them while it's preparing the export and make a route and the accompanying JSON file. Still it's a shit error message especially considering what it really means is that there was no route or JSON at all.
I am sure glad that this "hit you", because I don't have a lot of hair to pull out. :-)
I was so confused that some blog posts (the ones where the title and slug matched) were not getting an error, and other posts (where slug and title did not match) were showing a 500 error.
Hi, thnx for your elaborate explaination, it very insightfull for a beginner like me. Do you have a code snippet for this proposed solution ? I can't figured it out. Whatever I do it keeps spitting the same error.
For sure, here's the exact code I use to avoid the JSON error in a live Netlify + Sapper project. In this code I'm pulling in all posts through the prefetch and filtering, for me the filter was preventing Sapper from rendering any blog routes that were not loaded somewhere else. I put this code in the same file where my filter is but it can go in any .svelte file.
<divclass="sr-only"><!--You can iterate over the links from your preload fetch of posts-->
{#each posts as { slug, title }}
<arel="prefetch"href="blog/{ slug }">{title}</a>
{/each}
<!--And manually put any links that are breaking as well (it means Sapper doesn't think you're using them)--><arel="prefetch"href="/someotherpage">Some page name for screen readers (nobody else sees it)</a></div>
I'm using the class sr-only to hide from everyone but screen readers, there are plenty options for this class but the flavor I use in my global css is this.
Hey been awhile since I thought of this post and came back since I was getting the same error randomly after I created a post filtering method that ran in the onMount hook based on which category was selected. Almost pulled all my hair out until I realized it was only rendering JSON for the 2 posts I was showing separately on the front page of my site.
Then it hit me, Sapper only renders routes for links it can follow during export. My post filter (as cool as it is) prevents Sapper from seeing those links during export. I assume this is only an issue with exported sites since all routes worked in dev even before my fix.
My workaround for this was to create an each block and loop through all my posts inside a div that was screen reader only (so it doesn't show on the front end, I also gave them tabindex="-1" just in case so they don't jump into tab order) having this hidden list of links allows Sapper to see them while it's preparing the export and make a route and the accompanying JSON file. Still it's a shit error message especially considering what it really means is that there was no route or JSON at all.
I am sure glad that this "hit you", because I don't have a lot of hair to pull out. :-)
I was so confused that some blog posts (the ones where the title and slug matched) were not getting an error, and other posts (where slug and title did not match) were showing a 500 error.
Thanks for your help!
Hi, thnx for your elaborate explaination, it very insightfull for a beginner like me. Do you have a code snippet for this proposed solution ? I can't figured it out. Whatever I do it keeps spitting the same error.
For sure, here's the exact code I use to avoid the JSON error in a live Netlify + Sapper project. In this code I'm pulling in all posts through the prefetch and filtering, for me the filter was preventing Sapper from rendering any blog routes that were not loaded somewhere else. I put this code in the same file where my filter is but it can go in any .svelte file.
I'm using the class
sr-onlyto hide from everyone but screen readers, there are plenty options for this class but the flavor I use in my global css is this.You might also want to put a heading on top of that list of links so it's not confusing for screen readers.