Running into compiler error when using typescript together with svelte-image

[mcmxcdev]

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 content

Information 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.

[Conduitry]

This sounds like #4141 - svelte-image needs to get to get a compilable version of the whole component but, since it's a template preprocessor, it runs before the script preprocessor that handles the TypeScript.

[mcmxcdev]

I see.

Am I assuming correctly that this #4282 needs to be merged in order to avoid running into the compiler error?