Dynamic routes with params using data defetching fail on subsequent navigations

[minht11]

Using following page structure route/[slug] and using data fetching, changing between slugs RangeError: Maximum call stack size exceeded is thrown.

The whole issue is bit hard to explain, so here is a reproduction

1. Wait for the initial page to load.
2. Press "Test 2" link.
3. Observe error being thrown.

Screen.Recording.2023-05-22.at.13.16.17.mov

On my local setup if I on initial load/refresh everything is fine, only subsequent navigations result in failure.

[posva]

You had a few issues:

• Missing setupDataFetchingGuard(router)
• wrong options passed to defineLoader()

A few extra notes: you don't need to export the loader from App. In fact, App.vue is the only component that cannot use a loader as it mounts before the navigation starts (unless you await for the first navigation before calling app.mount()). Prefer using { name: ... } when using router-link for type safety, passing the path directly is not type safe and it's easier to just pass the strirng in that case as well.

Here you have a working example: https://stackblitz.com/edit/vitejs-vite-pmdkkm?file=src%2FApp.vue,src%2Floader.ts,src%2Fpages%2Ftest%2F[slug]%2Findex.vue,src%2Fmain.ts (not sure how long it will stay up)

[minht11]

Sorry about missing setup, but the max range issue is still presant. But locally and inside the link you given, just press links back and forth and the range error should occur.

Screen.Recording.2023-05-23.at.21.04.20.mov

[minht11]

@posva could you please check again. I still believe this is an actual issue and not the problem with the configuration, because range error is still present and easily reprodusable.

[posva]

#173