search

sveltejs / sapper

The next small thing in web development, powered by Svelte
https://sapper.svelte.dev
MIT License
7k stars 434 forks source link

Reactive statement pointing to array element in store is undeclared during SSR #1676

Closed TheSimpleZ closed 3 years ago

TheSimpleZ commented 3 years ago

Describe the bug I'm trying to assign an element in a store to a reactive variable like so:

import { readable } from 'svelte/store'
let index = 0
let a = readable([1, 2, 3, 4])
$: b = $a[index]

However, the b variable seems to be undeclared during SSR. Once the code is loaded in the browser, it seems to work fine.

The issue becomes apparent when I try to access b within the script tags, and I'm faced with this error:

Logs

Cannot access 'b' before initialization

To Reproduce A minimal reproduction can be found here. The bug is reproduced in this file.

Expected behavior I would expect the variable to be declared and initialized with the given value. In this case, b should be equal to 1.

Stacktraces

Stack trace ReferenceError: Cannot access 'b' before initialization at C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\src\routes\index.svelte:9:15 at Object.$$render (C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\node_modules\svelte\internal\index.mjs:1365:23) at Object.default (C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\src\node_modules\@sapper\internal\App.svelte:24:50) at C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\__sapper__\dev\server\server.js:504:66 at Object.$$render (C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\node_modules\svelte\internal\index.mjs:1365:23) at C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\src\node_modules\@sapper\internal\App.svelte:20:18 at $$render (C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\node_modules\svelte\internal\index.mjs:1365:23) at Object.render (C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\node_modules\svelte\internal\index.mjs:1373:33) at C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug\src\node_modules\@sapper\server.mjs:4687:54 at Generator.next ()

Information about your Sapper Installation:

Output of above command PS C:\Users\Zrean\Documents\GitHub\repro-reactive-statement-bug> npx envinfo --system --npmPackages svelte,sapper,rollup,webpack --binaries --browsers npx: installed 1 in 1.38s System: OS: Windows 10 10.0.19042 CPU: (8) x64 Intel(R) Core(TM) i7-7700K CPU @ 4.20GHz Memory: 1.31 GB / 15.94 GB Binaries: Node: 14.1.0 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 87.0.4280.88 Edge: Spartan (44.19041.423.0), Chromium (87.0.664.60) Internet Explorer: 11.0.19041.1 npmPackages: rollup: ^2.3.4 => 2.35.1 sapper: ^0.28.0 => 0.28.10 svelte: ^3.17.3 => 3.31.0 
Google Chrome
Version 87.0.4280.88 (Official Build) (64-bit)

Local.

Dynamic.

Severity How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Sapper entirely?

For those who don't know about the workaround below, this error will cause their application to crash and stop functioning.

Additional context One workaround I've found is to declare the reactive variable yourself. Once with let and once with $: Like this:

import { readable } from 'svelte/store'
let index = 0
let a = readable([1, 2, 3, 4])
let b = $a[index]
$: b = $a[index]

Now I can access the variable b within the script tag and it's reactive if I change the index variable from somewhere else 😄 Although the svelte docs mention that developers shouldn't have to do that themselves.

dimfeld commented 3 years ago

You can't access variables declared only in reactive statements from non-reactive statements. I'm actually surprised it doesn't give you an error in non-SSR mode. Making the console.log(b) into a reactive statement would be the desired solution here.

Conduitry commented 3 years ago

This is a duplicate of https://github.com/sveltejs/svelte/issues/3582