Failing to generate dynamic routes with Sapper export

user_3648524 0
Viewed 1283

I have a dynamic route:

routes/artwork/[slug].svelte.

All works great with npm run dev.

But when I npm run export those dynamic slug routes are missing. I don't see them in the __sapper__/export, and the pages are missing as well when I uploaded to Netlify.

Any clue how I might be able to fix that? Did I miss something obvious?

sapper svelte
4 Answers

sapper export works by building your app, running it, then visiting / and recursively visiting every internal link it finds. For that reason, it has to be possible to get to /artwork/foo and /artwork/bar etc by following links from the home page (e.g. via a routes/artwork/index.svelte page, which would map to /artwork).

user_27423960

To add additional context to Rich Harris's answer:

If a similar route URL is crawled incorrectly before the dynamic routes are, it won't try to generate the dynamic route.

A homepage link uses "/events/slug" instead of href="events/slug", the dev site will correctly provide a 404 on the homepage link, and serve the dynamic slugs on the events page. But, on build, the slugs will not be generated at all.

user_18281230

As mentioned by collardeau in my case the problem was that I wrapped my page components in a TransitionWrapper component that has {#if show} which is false to start and is flipped to true on mount. A simple workaround was starting it with true then flip it twice on mount:

// TransitionWrapper.svelte
...
let show = true;

onMount(() => {
    show = false;
    show = true;
});
...

Since the code is executed inside onMount, it works without any issues based on the tests I've run

user_100641580

In case anyone is have this issue. The solution above didn't really help cause I have lots of nested routes and you can't specify those routes using the --entries approach.

However what worked was creating a 404.svelte file in my routes folder and then adding this to my package.json

"export": "sapper export --legacy --entry \"/ /404\"",
"postexport": "mv __sapper__/export/404/index.html __sapper__/export/404.html",

The source of this solution was from this github issue

user_88171460
Related