CODEWITHSUNDEEP
sveltesapper
collardeau
collardeau

Reputation: 820

Failing to generate dynamic routes with Sapper export

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?

Upvotes: 2

Views: 1342

Answers (4)

rotimi-best
rotimi-best

Reputation: 1922

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

Upvotes: 0

José Trindade
José Trindade

Reputation: 43

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

Upvotes: 0

Stuart Kent
Stuart Kent

Reputation: 1

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.

Upvotes: 0

Rich Harris
Rich Harris

Reputation: 29605

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).

Upvotes: 7

Related Questions