Button issue - le is undefined when links followed

[rohfle]

Hello,

Summary

I am using svelma and svelte-spa-router for a project and I am having an issue where having a svelma button on a page will cause the page to error when links are followed.

POC

Here is an example project that reproduces the issue: https://github.com/rohfle/svelma-button-issue-poc

Details

When I import using import { Button } from 'svelma', I get the following error when I click a link to take me to another page:

TypeError: le is undefined [module.js:1:4169]

console.log(Button) gives me:

When I import using import Button from 'svelma/src/components/Button.svelte', I get no error and console.log(Button) gives me:

[c0bra]

Looking into it; thanks for the repro repo.

[c0bra]

I think this may be fixed by this: https://github.com/sveltejs/svelte/pull/3159 It fixed the docs navigation bug. Going to try.

Update 1: Not fixed, furthermore when I npm link uncompiled Svelma I get the error on both the import types you did.

Update 2: The errors I'm seeing with unminified source point to issues with transition outros being undefined. My hunch is that this is related to https://github.com/sveltejs/svelte/pull/3166 and svelte-spa-router needs to update their version of Svelte.

[c0bra]

@rohfle Looks like it's still happening with svelte-spa-router >= 1.2.0

[josh-richardson]

I'm also getting this with svelte-spa-router 1.2.0 and svelma 0.3.

[rohfle]

So I dug into this a little bit more because it puzzled me:

Console trace

Relevant code

    let outros$1;
    function group_outros$1() {
        outros$1 = {
            r: 0,
            c: [],
            p: outros$1 // parent group
        };
        console.log('group_outros$1', outros$1)
    }
    function check_outros$1() {
        if (!outros$1.r) {
            run_all$1(outros$1.c);
        }

        outros$1 = outros$1.p;
        console.log('check_outros$1', outros$1)
    }
    function transition_in$1(block, local) {
        if (block && block.i) {
            outroing$1.delete(block);
            block.i(local);
        }
    }
    function transition_out$1(block, local, detach, callback) {
        console.log('transition_out$1', outros$1, 'block', block)
        if (block && block.o) {
            if (outroing$1.has(block))
                return;
            outroing$1.add(block);
            outros$1.c.push(() => {      // THIS IS WHERE THE ERROR HAPPENS
                outroing$1.delete(block);
                if (callback) {
                    if (detach)
                        block.d(1);
                    callback();
                }
            });
            block.o(local);
        }
    }

Notes

• There are two transition_out functions in the repro repo bundle.js - transition_out and transition_out$1 (part of the Svelma module.js bundle)
• Where the error happens, outros$1 is undefined.
• The normal calling pattern is

group_outros(); // creates a outros object with existing outros as parent
transition_out(); // calls a blocks outro function 
   b1.o() // outros function for block if there is one
check_outros(); // makes outros parent the outros object

• The calling pattern we are seeing with the bug is

group_outros();
transition_out();
   b1.o(); // outros function for block b1
     group_outros();
     transition_out(); // this one is ok
     transition_out();
       b2.o(); // outros function for sub block b2
         // group_outros$1() is not called
         transition_out$1(); // this is where the error happens for block b3
         // check_outros$1() is not called
     check_outros(); // code never gets here
check_outros()

It seems there are two different sveltes running with different transition functions and global variables - one that is part of the repro repo and one that is part of the svelma bundle. Could this be why the issue is occurring? I tried compiling Svelma from source using rollup with terser turned off. The above naming with $1s are renames automatically performed by rollup to prevent name conflict. On the minified code it just has random functions, but they are still distinct from the repro repo ones.

Note that svelte-spa-router is just raw .svelte code that gets imported by the repro repo. Perhaps svelma has to switch to using the same thing? (Use svelte straight from source, not precompiled)

EDIT: similar to issue https://github.com/c0bra/svelma/issues/29 - kroshilin's proposed PR https://github.com/c0bra/svelma/pull/31 fixes the issue in the repro repo successfully!