Can't access routes which have nested layouts

[antony]

Describe the bug If you have a series of nested directories with layouts in your routes directory, and you attempt to navigate to a second level directory, then preload gets stuck, the browser URL changes, but preloads stop being executed (and the preload store gets "stuck" in preloading state) at that point and the application freezes.

The preloading seems to completely skip the outermost layout.

Additional context Add any other context about the problem here.

1. This only happens on the client-side. The server side works as expected.
2. The preload ordering seems wrong. It preloads the innermost route's layout without the outermost one. The server shows the expected behaviour.
3. This only happens the first time you try it. If you then go back and try again, the routes load as expected. (hard refresh to reproduce from scratch)
4. Direct visits to the problematic route work without issue (i.e. this affects goto, and links)
5. This bug first appeared in Sapper 0.28.7

Logs Server:

level1 preload
level2 preload

Client:

level2 preload

To Reproduce

https://github.com/antony/sapper-incongruous-layouts-issue

Run app and click checkout.

Expected behavior

1. App should navigate
2. Preload should work
3. Preload level1 should load
4. Preload level2 should load only after level1

Information about your Sapper Installation:

System:
    OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
    CPU: (4) x64 Intel(R) Core(TM) i7-5500U CPU @ 2.40GHz
    Memory: 329.94 MB / 7.68 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.18.3 - ~/.nvm/versions/node/v12.18.3/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v12.18.3/bin/yarn
    npm: 6.14.6 - ~/.nvm/versions/node/v12.18.3/bin/npm
  Browsers:
    Chrome: 85.0.4183.121
    Firefox: 81.0
  npmPackages:
    rollup: ^2.3.4 => 2.28.2 
    sapper: ^0.28.0 => 0.28.9 
    svelte: ^3.17.3 => 3.28.0 

Severity Critical.

[antony]

Slowly trying to debug this and find out why there is an issue. It appears that the promise here:

https://github.com/sveltejs/sapper/blob/master/runtime/src/app/app.ts#L245

is called for the outermost layout of the route (level1), but never resolves. Meanwhile, the innermost route (level2) resolves without issue.

[sabine]

I'm fetching data from an API in _layout.svelte to share that between different sub-routes. It seems I've been running into this issue. Is someone aware of a workaround?

Edit: My workaround is to not have an asynchronous preload in _layout.svelte. Since, then, I don't have access to the data shared by the sub-routes in _layout.svelte, I moved the HTML page layout that I had in _layout.svelte into a separate component that I apply on each of the sub-routes. This seems to work well, and may actually be the better approach, compared to sharing API data between sub-routes via _layout.svelte, anyways. Loading the API data on each of the sub-routes is more flexible in the sense that I have control over when to cache the shared data, and when not.

[motzyball]

Also running into this, but looking at the routes in your example repo, I am not having an issue navigating inside a level but across them. We are using preload in all our layouts, so that tracks.

routes/
  _layout
  thing1/_layout/thing2/_layout 
  thing3/_layout

• no issues navigating between routes under things 1 and 2
• inconsistent results navigating via link between routes under things 3 and 1, sometimes it works the first time, sometimes not