svelte
svelte copied to clipboard
Broken dependency detection in @const block
trafficstars
Describe the bug
In a {@const ...} block, the dependencies are resolved by variable name. If there's shadowing, the dependency might not match the actual variable being used. This may lead to a circular dependency.
Example:
<script>
let arr = [...'abc'];
</script>
<h1>
{#if true}
{@const a = arr.map(b => b.toUpperCase()).join('')}
{@const b = a.toLowerCase()}
Hello {a} & {b}!
{/if}
</h1>
Reproduction
- Create an
{@if}or{@each}block - Inside it, create a const block with a variable named
a, and in its definition use an arrow function that takes a parameter namedb - Next to it, create a const block named
bthat uses the variableain its definition - Svelte claims it's a circular dependency, or the compiler crashes with "Maximum call stack exceeded"
Logs
19:31:06 [vite] Internal server error: Error while preprocessing /home/csha/Dokumenty/sa-overview-svelte/src/lib/MetricTable.svelte - Maximum call stack size exceeded
Plugin: vite-plugin-svelte
File: ~/proj/src/lib/App.svelte
at ~/proj/node_modules/svelte/compiler.js:31576:36
at Set.forEach (<anonymous>)
at add_node (/home/csha/Dokumenty/sa-overview-svelte/node_modules/svelte/compiler.js:31576:28)
at Array.forEach (<anonymous>)
at ~/proj/node_modules/svelte/compiler.js:31581:32
at Set.forEach (<anonymous>)
at add_node (~/proj/node_modules/svelte/compiler.js:31576:28)
at Array.forEach (<anonymous>)
at ~/proj/node_modules/svelte/compiler.js:31581:32
at Set.forEach (<anonymous>)
System Info
System:
OS: Linux 6.0 undefined
CPU: (2) x64 AMD A4-9120 RADEON R3, 4 COMPUTE CORES 2C+2G
Memory: 3.12 GB / 11.16 GB
Container: Yes
Shell: 5.9 - /usr/bin/zsh
Binaries:
Node: 19.0.1 - /usr/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 8.19.2 - /usr/bin/npm
Browsers:
Brave Browser: 107.1.45.118
Chromium: 107.0.5304.87
Firefox: 106.0.5
npmPackages:
svelte: ^3.44.0 => 3.52.0
vite: ^3.1.1 => 3.2.3
Severity
annoyance