Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

const tag using .reduce inside each block with a nested each block bugging out very weridly #7431

Closed
SarcevicAntonio opened this issue Apr 7, 2022 · 2 comments · Fixed by #7222

Comments

@SarcevicAntonio
Copy link
Member

SarcevicAntonio commented Apr 7, 2022

Describe the bug

I got some weird behavior using the const tag inside an each block which also contains another each block.

I'm trying to use a data structure like this:

const data = [
	{
		items: [{ val: 1 }, { val: 1 }],
	},
];

Straight forward enough.

Now I want to display the sum of each object's item.vals inside the data array and then also display each item.val.

Something like this works (REPL)

{#each data as obj}
	sum: {obj.items.reduce((acc,item)=> acc + item.val,0)}
	{#each obj.items as {val}}
		<div>val: {val}</div>
	{/each}
{/each}

Now let's say I need to sum multiple times and I want to use the const tag (REPL)

{#each data as obj}
	{@const sum = obj.items.reduce((acc,item)=> acc + item.val,0)}
	sum: {sum}
	{#each obj.items as {val}}
		<div>val: {val}</div>
	{/each}
{/each}

By adding the const tag Svelte errors out with Cannot read properties of undefined (reading '5').

Removing the inner each block resolves the error.

I also tried not deconstructing inside the nested each (REPL)

{#each data as obj}
	{@const sum = obj.items.reduce((acc,item)=> acc + item.val,0)}
	sum: {sum}
	{#each obj.items as item}
		<div>item.val: {item.val}</div>
	{/each}
{/each}

This produces different errors:

  • inside the REPL: Assigning to rvalue (Note that you need plugins to import files that are not JavaScript)
  • inside SvelteKit: 500 Invalid destructuring assignment target SyntaxError: Invalid destructuring assignment target

And now the best part: if I rename item inside the nested block, it works again (REPL)

{#each data as obj}
	{@const sum = obj.items.reduce((acc,item)=> acc + item.val,0)}
	sum: {sum}
	{#each obj.items as itm}
		<div>item.val: {itm.val}</div>
	{/each}
{/each}

This is terrifying and makes me want to not use the const tag again, which is sad because It's a pretty neat feature.

Reproduction

same as linked above

Logs

"by using const tag" in SvelteKit:

[date].svelte? [sm]:9 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '5')
    at [date].svelte? [sm]:9:60
    at Array.reduce (<anonymous>)
    at get_each_context ([date].svelte? [sm]:9:26)
    at create_fragment ([date].svelte? [sm]:8:7)
    at init (index.mjs:1877:37)
    at new U5Bdateu5D ([date].svelte? [sm]:4:32)
    at createProxiedComponent (svelte-hooks.js:266:9)
    at new ProxyComponent (proxy.js:239:20)
    at new Proxy<[date]> (proxy.js:346:11)
    at Array.create_else_block (root.svelte? [sm]:43:40)

"by using const tag" in REPL: (only on initial visit of REPL)

index.da61f847.js:60 Error: Could not load https://unpkg.com/svelte@3.46.6/internal/index.mjs (imported by ./App.svelte): 
    at R (index.da61f847.js:21:834)
    at tn (index.da61f847.js:51:3364)
    at index.da61f847.js:51:21283
    at async index.da61f847.js:51:8510
    at async Zu.work (index.da61f847.js:51:2752)

"now not deconstructed" in REPL: (no log in SvelteKit shown, only 500 error above)

index.da61f847.js:60 Error: Assigning to rvalue (Note that you need plugins to import files that are not JavaScript)
    at R (index.da61f847.js:21:834)
    at re.error (index.da61f847.js:28:123491)
    at re.tryParse (index.da61f847.js:28:131909)
    at re.setSource (index.da61f847.js:28:129343)
    at ic.addModuleSource (index.da61f847.js:51:9316)

System Info

System:
    OS: macOS 12.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1.18 GB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 100.0.4896.75
    Firefox: 98.0.1
    Safari: 15.3

Severity

annoyance

@dimfeld
Copy link
Contributor

dimfeld commented Apr 8, 2022

Your REPL that creates the error Cannot read properties of undefined (reading '5'). seems to be a slightly different manifestation of #7423. Underlying cause appears to be the same, looking at the generated code.

The rest are something else as far as I can tell.

@gtm-nayan
Copy link
Contributor

#7222 was supposed to fix this I think, but has fallen into the depths of the issue tracker.

@tanhauhau tanhauhau linked a pull request Apr 8, 2022 that will close this issue
5 tasks
dummdidumm pushed a commit that referenced this issue Apr 8, 2022
Fixes #7423
Fixes #7431
Fixes #7206
Fixes #7431
Fixes #7221

Co-authored-by: tanhauhau <lhtan93@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants