Importing from "svelthree.mjs" throws an Error in some use cases

[vatro]

Currently there's an issue bound to library bundling (dist/svelthree.mjs):
When importing from https://unpkg.com/svelthree@latest/dist/svelthree.mjs some examples on svelthree.dev/examples "break":

1. Reactive multiple Mesh group creation
2. Reactive multiple reusable Mesh group creation

means the amount of 3d-objects will not be reduced and an Error is thrown.

☝️ standard local development workflow: installing the library, importing from "svelthree" (means from /src) and publishing / building is not affected by this issue! (there is no Error being thrown)

How to reproduce

REPL

1. Go to svelthree.dev-example Reactive multiple Mesh group creation (debug version)
   This example loads an unminified dev-version of svelthree.mjs including console.info messages and source maps.

2. Open Chrome Dev Tools
   recomended: disable "Info"-level messages & clear REPL console messages

3. Increase the amount of objects via slider

4. Try to the decrease the number of objects via slider -> an Error will be thrown:

VM24:636 Uncaught (in promise) TypeError: Cannot read property 'c' of undefined
    at transition_out$1 (eval at handle_message (about:srcdoc:13), <anonymous>:636:22)
    at Object.o (eval at handle_message (about:srcdoc:13), <anonymous>:62913:8)
    at transition_out (eval at handle_message (about:srcdoc:13), <anonymous>:221:19)
    at Object.outro [as o] (eval at handle_message (about:srcdoc:13), <anonymous>:71472:8)
    at transition_out (eval at handle_message (about:srcdoc:13), <anonymous>:221:19)
    at out (eval at handle_message (about:srcdoc:13), <anonymous>:71530:23)
    at Object.update [as p] (eval at handle_message (about:srcdoc:13), <anonymous>:71597:10)
    at update_slot (eval at handle_message (about:srcdoc:13), <anonymous>:494:18)
    at Object.p (eval at handle_message (about:srcdoc:13), <anonymous>:64719:10)
    at update$1 (eval at handle_message (about:srcdoc:13), <anonymous>:619:40)

At this point you could say the Error is bound to REPL, but if you test svethree.mjs locally ...

LOCALLY

1. Download svelthree-issue-1-debug.zip
2. Unzip, npm i, npm run dev
3. Go to http://localhost:5000
4. Open Chrome Dev Tools, recomended: disable "Info"-level messages
5. Increase the amount of objects via slider
6. Try to the decrease the number of objects via slider -> an Error will be thrown:

svelthree.mjs:217 Uncaught (in promise) TypeError: Cannot read property 'c' of undefined
    at transition_out$1 (svelthree.mjs:217)
    at Object.o (svelthree.mjs:63854)
    at transition_out (index.mjs:782)
    at Object.outro [as o] (App.svelte:79)
    at transition_out (index.mjs:782)
    at out (App.svelte:69)
    at Object.update [as p] (App.svelte:69)
    at update_slot (svelthree.mjs:75)
    at Object.p (svelthree.mjs:66255)
    at update$1 (svelthree.mjs:200)

looking at svelthree.mjs:217, the Error happens in this function:

function transition_out(block, local, detach, callback) {
    if (block && block.o) {
        if (outroing.has(block))
            return;
        outroing.add(block);
        outros.c.push(() => {
            outroing.delete(block);
            if (callback) {
                if (detach)
                    block.d(1);
                callback();
            }
        });
        block.o(local);
    }
}

on line outros.c.push(() => {
... putting a breakpoint here and running the same procedure again + going one step back in the Call Stack, you can see the Error happens when Svelte it trying to transition_out the slot and the the two child components inside the Mesh component:

o(local) {
    transition_out(default_slot, local);
    transition_out(svelthreeanimation.$$.fragment, local);
    transition_out(svelthreeinteraction.$$.fragment, local);
    current = false;
}

Solving Attempt (partially successful)

I managed to prevent the error in the Reactive multiple Mesh creation example by removing conditional rendering of the slot and the child components of the Mesh component + X (see commit Refactor Mesh) and already believed that was it, but then I noticed the Error is still being thrown with grouped Mesh objects.

Next Thought

My next thought was I should 'simply' try to somehow disable transitioning, as svelthree is not using transitions at all. Beside the fact I didn't find any way to do this, I then noticed the problem only occurs if we import from 'svelthree.mjs', importing from 'svelthree' (src) is working like a charm, no errors. 🤷‍♂️

Conclusion

👉 So the problem must be bound to bundling of svelthree.mjs / general setup.

I've compared both 'svelthree.mjs' (ES) and the working 'bundle.js' (importing from 'svelthree', ES) of the example but didn't notice any anomalies and cannot explain why this specific error get's thrown when importing from 'svelthree.mjs', but not when building from source, means importing from 'svelthree'.

Any hints / help on this issue would be much appreciated! 👍😎
Thanks! ✊

Possible Fix

• Test if removing 'SvelthreeInteraction' from svelthree.js / svelthree.d.ts fixes the issue

[vatro]

Just stumbled (while working on WebXR interaction) that we're exporting 'SvelthreeInteraction' although this only being used by components internally (not meant to be used as a component). Removing it might fix the issue (did it already), but I'm too much into WebXR to test it right now.

[TheComputerM]

This is no problem of svelthree, I am the creator of svelte-materialify and when I run some of my examples in the REPL, they show errors similar to this, but not locally, It seems that this has something to do with precompiled js files.

[vatro]

I've just tested the assumed fix and yes, it seems fixed now! 🥳 --> no errors when importing from svelthree.mjs (locally). So it was actually a simple bundling problem: I was additionally exporting an "internal" component which was already being included because other components import it. Great!

Will keep this open until next release / tested under real circumstances, means if importing from https://unpkg.com/svelthree@latest/dist/svelthree.mjs works as expected.

[vatro]

☝️ if you need to import from the bundled version 👉 'svelthree.mjs' (not source) and this bug is bugging you, until next release, you could try to apply the fix described above on your local installation and bundle the library (svelthree.mjs) by yourself.

Keep svelthreeing! More exciting features coming soon! 🚀