TypeError: Cannot read property 'c' of undefined

[Trystan-SA]

Node: 14.15.5 Svelte: 3.37.0 Carbon-components-svelte: 0.32.1 esbuild: 0.11.12 esbuild-svelte: 0.4.3

My svelte application crash (runtime) when I'm trying to hide a section with a #If statement that contains a carbon-components-svelte button.

{isShow}
<span on:click={()=>{isShow=true}>Show</span>
<span on:click={()=>{isShow=false}>Hide</span>

{#if isShow === true}
   <Button> carbon-components-svelte Button</Button> 
{/if}

First, the "isShow" variable is set to false, so the button is hidden. Then I click the first span element to set the "isShow" variable to true. This will show the button correctly. Then if I try to hide the button by clicking the other span element, my application raises an error and crash (the button is still visible and nothing respond anymore).

Uncaught (in promise) TypeError: Cannot read property 'c' of undefined
    at Le (index.js:1)
    at Object.o (index.js:1)
    at transition_out (index.mjs:816)
    at Object.o (Setup.svelte:6)
    at transition_out (index.mjs:816)
    at Object.p (Setup.svelte:37)
    at update (index.mjs:764)
    at flush (index.mjs:732)

The code that crash is inside the svelte internal package (node_modules/svelte/internal/index.mjs). I still don't really know if it's the fault of carbon-components-svelte or svelte directly. Maybe it's the way Carbon call the transition function ? I fixed this in another project of mine by adding, "outros?.c?.push(()=>{" to the source code of svelte (but using es6 syntax is not really a good solution).

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);
    }
}

I played a little with the carbon-components-svelte package.json file. If i change this :

{
  "main": "./lib/index.js",
  "module": "./lib/index.js"
}

to this :

{
  "main": "./src/index.js",
  "module": "./src/index.js"
}

The issue will disappear (but the build time obviously increase up to 3/4 seconds) Maybe the issue comes from how this package is bundled ? I also use esbuild and esbuild-svelte, so maybe the issue com from my application bundle.

[deivinsontejeda]

I think this has relation with this issue and https://github.com/IBM/carbon-components-svelte/issues/603...

I will test with your workaround and let you know!...

[deivinsontejeda]

@Trystan-SA Where do made those changes? I mean on package.json of your project?

[Trystan-SA]

@deivinsontejeda The first one is the original, the second one is my modified version. I was trying to fix the issue by changing the source's .svelte files inside the carbon-components node_module's folders.

I didn't had to change any source file though, only changing it to "./src" instead of "./lib" did the trick.

[deivinsontejeda]

Awesome @Trystan-SA thank you! But I think carbon has an issue with this. #603 is very similar to this one.

I will check your suggestion...