Marc Frame
Posted on February 26, 2022
I asked the following question on the Svelte discord, but was able to solve it before anyone had a chance to look at the question (classic).
Question
I have a sveltekit app where I've defined a page as dynamic with the following svelte.config.js
import adapter from '@sveltejs/adapter-static';
...
const config = {
kit: {
prerender: {
entries: [
"/",
"/portfolio"
],
},
}
...
}
because the page /blogs
and /blog?file=/some/blog/file.md
are populated by a fetch call to a rest API.
if I don't include the kit.prerender.entities
I get the following error when I run npm run build
Error: Cannot access url.searchParams on a page with prerendering enabled
The issue is, that when I refresh the page, or route directly to the /blog?file=/some/blog/file.md
it renders the index page instead of the blog page.
How should I fix this?
Here's an example https://mframe.ca/blog?file=About%20this%20blog.md
- note it should render the blog, not my index page
- you can route to that blog ("About this blog") through https://mframe.ca/blogs
Here's how the /blog
page works
Answer
you have to run it in "SPA" mode. by providing a fallback to the adapter
adapter: adapter({
pages: 'build',
assets: 'build',
fallback: 'index.html',
precompress: false
}),
The issue was that it was looking for a /blog/index.html file but it of course wasn't there.
A better way to selectively prerender
<script context="module">
export const prerender = true;
</script>
add this to the pages that you want to prerender, those without this declaration will not be prerendered. you will of course still have to 'run it in "SPA" mode' as noted above.
This is cleaner than the above solution of editing the
congif.kit.prerender.entities
insvelte.config.js
More
Read more about the blog here:
https://dev.to/marcdaframe/github-as-a-cms-for-your-blog-fhh
View the source code for the blog here:
Posted on February 26, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.