Cannot read property 'c' of undefined if component is unloaded / conditionally rendered

[student020341]

I thought maybe this was related to the svelte router library I chose at first, but then I reproduced the issue with this minimal component:

<script>
    import {JSONEditor} from "svelte-jsoneditor";
    let show = true;
</script>

<div>
    <button on:click={() => show = !show}>Toggle</button>
    {#if show}
        <JSONEditor />
    {/if}
</div>

This issue can also be reproduced if you have the json editor component loaded in a component that is loaded / unloaded by the "svelte-routing" package.

[josdejong]

Thanks for reporting! I can indeed reproduce this with a simple conditional rendering, the application throws an exception when the conditional is changed to false and the component is unmounted.

I have no idea yet why it happens. Help would be welcome to figure this out!

[student020341]

I wish I could offer more insight here, I think this issue might be related. The stack I see in the error looks really similar to the one in that issue.

Looks like there are a variety of suggestions there, I'll try some myself since it looks like some are for consuming a library that has the issue rather than fixing it. It is mentioned a few times in the issue that they think the problem might be multiple svelte versions. I'll see if either the "dedupe" or code patch solutions work in this case.

[josdejong]

Thanks!

[josdejong]

I've spend some time trying to figure this out. It turns out, the current recommended way to publish Svelte components is to publish the source code, see https://github.com/sveltejs/component-template#consuming-components:

Your package.json has a "svelte" field pointing to src/index.js, which allows Svelte apps to import the source code directly, if they are using a bundler plugin like rollup-plugin-svelte or svelte-loader (where resolve.mainFields in your webpack config includes "svelte"). This is recommended.

Problem with this approach is that any preprocessing required by components must be taken care of by the consuming application. In this case: SASS preprocessing and JSON loading. I've described how to do this for svelte-jsoneditor in the readme: https://github.com/josdejong/svelte-jsoneditor#svelte-setup, version 0.1.3. I've tested and this new setup solves the conditional rendering issue.

Ideally, the consumer of a component doesn't have to worry about any preprocessing required by the components it uses. This is discussed here: sveltejs/component-template#8, but here is no solution yet as far as I can see.