Description
Describe the bug
Code example throwing error
<script>
import Image from 'svelte-image';
import Fa from 'svelte-fa';
import { faCheck } from '@fortawesome/free-solid-svg-icons';
import { faClock } from '@fortawesome/free-regular-svg-icons';
// adding types throws compiler error for some reason
export let readableSlug;
const programmingGoals = [
{
text: 'Learn Svelte',
reached: true,
}
];
const lifestyleGoals = [
{
text: 'Participate in a 140km bike race',
reached: false,
},
];
// adding types throws compiler error for some reason
let isProgrammingCategory: boolean;
let goals = [];
$: isProgrammingCategory = readableSlug === 'Programming';
$: goals = isProgrammingCategory ? programmingGoals : lifestyleGoals;
</script>
<div class="w-full md:w-2/4">
<h1>{readableSlug}</h1>
<h2>Current goals</h2>
{#each goals as goal}
<div class="flex items-baseline italic">
{#if goal.reached}
<Fa icon="{faCheck}" class="mr-3 text-green-500" />
{:else}
<Fa icon="{faClock}" class="mr-3 text-gray-600" />
{/if}
<p>{goal.text}</p>
</div>
{/each}
</div>
<div class="w-full md:w-2/4">
{#if isProgrammingCategory}
<Image src="code-review.png" alt="Man with code editor" />
{:else}
<Image src="into-the-night.png" alt="Man sitting next to campfire" />
{/if}
</div>In the provided code example, let isProgrammingCategory; works, but as soon as you add a type to it like let isProgrammingCategory: boolean; the compile error occurs like attached below in the stacktrace.
When you remove <Image /> and the svelte-image import from the file, everything works again as expected also with type annotations.
Unfortunately, I couldn't provide an example since Svelte REPL doesn't work with typescript yet.
Encountered while running sapper dev.
Expected behavior
Able to add typescript annotations to any .svelte file
Stacktraces
Stacktrace
CompileError [ParseError]: Unexpected token
at error$1 (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:15595:20)
at Parser$1.error (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:15671:10)
at Parser$1.acorn_error (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:15665:15)
at Object.read_script [as read] (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:7377:17)
at tag (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:14737:34)
at new Parser$1 (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:15630:22)
at Object.parse$3 [as parse] (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:15761:21)
at replaceImages (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte-image/src/main.js:483:18)
at markup (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte-image/src/main.js:531:19)
at preprocess (/home/markus/Applications/Webdevelopment/mhatvan.github.io/node_modules/svelte/compiler.js:26987:34) {
code: 'parse-error',
start: { line: 25, column: 27, character: 584 },
end: { line: 25, column: 27, character: 584 },
pos: 584,
filename: undefined,
frame: '23: \n' +
'24: // adding types throws compiler error for some reason\n' +
'25: let isProgrammingCategory: boolean;\n' +
' ^\n' +
'26: let goals = [];\n' +
'27: '
} Error parsing component contentInformation about your Svelte project:
-
Your browser and the version: Brave v1.12.114
-
Your operating system: Ubuntu Linux 20.04
-
Svelte version: v3.24.1
-
Whether your project uses Webpack or Rollup: Rollup
Severity
How severe an issue is this bug to you? Is this annoying, blocking some users, blocking an upgrade or blocking your usage of Svelte entirely?
Moderate, having to stay off typescript annotations for that complete file.