sveltejs/sapper

Page frozen when refreshing and/or loading dynamic page

Closed this issue · 2 comments

Describe the bug

If i load my application on one of the dynamic pages in the [id] folder (e.g http://localhost:3000/projects/04wurwilefj), then the app just freezes (nothing works, not even onMounts).
I have a folder structure like this:

routes 
  |
  |--- _error.svelte
  |--- _layout.svelte
  |--- index.svelte
  |--- login.js
  |--- logout.js
  |--- login.svelte
  |--- _error.svelte
  |--- projects
             |
             |--- [id]
                       |
                       |--- _layout.svelte
                       |--- index.svelte
                       |--- settings
                       |           |
                       |           |---index.svelte
                       |           
                       |--- manual
                       |           |
                       |           |---index.svelte
                       |          
                       |--- documents
                                  |
                                  |---index.svelte

I am using express-session and some other packages to handle authorization/access on my app. This is what my server.js file looks like:

import sirv from 'sirv';
import polka from 'polka';
import compression from 'compression';
import * as sapper from '@sapper/server';
import { json } from 'body-parser';
import session from 'express-session';
import sessionFileStore from 'session-file-store';

const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';

const FileStore = new sessionFileStore(session);

polka() // You can also use Express
  .use(
    json(),
    session({
      secret: 'SomeSecretStringThatIsNotInGithub',
      resave: true,
      saveUninitialized: true,
      cookie: {
        maxAge: 31536000
      },
      store: new FileStore({
        path: `.sessions`
      })
    }),
  compression({ threshold: 0 }),
    sirv('static', { dev }),
    sapper.middleware({
      session: (req, res) => {
        return ({
          token: req.session.token
        })}
      })
    )
  .listen(PORT, err => {
    if (err) console.log('error', err);
  });

The way i am checking if a user is allowed to go to any of the routes is by having this in the routes/_layout.svelte file:

<script context="module">
  const publicRoutes = ["/login"];
  const disallowedPrivateRoutes = ["/login"];

  export async function preload(page, session) {
    if (publicRoutes.indexOf(page.path) === -1 && !session.token) {
      this.redirect("302", "login");
    } else if (disallowedPrivateRoutes.includes(page.path) && session.token) {
      this.redirect("302", "");
    }
  }
</script>

<slot />

Logs
There aren't any logs, but one weird behaviour is that if i refresh the page some times (5-10 times) then the bug disappears. So the freezing is inconsistent.

To Reproduce
The current repo: https://github.com/MathiasWP/Svelte-test

Try and go to: http://localhost:3000/projects/w3rf

Expected behavior
If you go to a dynamic page, then nothing on the page works. Also if you go to a non-existing page and go back to one of the dynamic pages stuff also doesn't work.

Information about your Sapper Installation:

 System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 761.42 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.15.0 - /usr/local/bin/node
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 86.1.16.72
    Safari: 14.0
  npmPackages:
    rollup: ^2.3.4 => 2.33.1 
    sapper: ^0.28.0 => 0.28.10 
    svelte: ^3.17.3 => 3.29.4 

Browser: Brave

Hosting env: local

Dynamic application.

Severity
Kind of high, i am fully aware that it probably is just me doing something wrong, but the application is unusable for me atm. The application is relatively small, so it's kind of important that i find out early if i am way off tracks or if this is an actual bug.

Note: the more honest and specific you are here the more we will take you seriously.

Additional context
Add any other context about the problem here.

Note: To log in, just type in any email and password. There's no current REST Api that checks anything. A token is immediately returned

Solution: Downgrading to sapper@0.28.6 solved the problem.