[svelte 5] I need to console.log certain imports or I get a ReferenceError at runtime

[danielo515]

Describe the bug

I am porting a Obsidian plugin to Svelte 5.
For some weird reason, some of my imported components, and even some third party dependencies are (I suppose) being removed by the compiler. I need to console.log them in order to not get runtime errors.

Reproduction

<script lang="ts">
    import * as Separated from "fp-ts/Separated";
    import { FormDefinition } from "src/core/formDefinition";
    import { MigrationError } from "src/core/formDefinitionSchema";
    import { Readable } from "svelte/store";
    import Button from "./components/Button.svelte";
    import KeyValue from "./components/KeyValue.svelte";

    export let createNewForm: () => void;
    export let deleteForm: (formName: string) => void;
    export let duplicateForm: (formName: string) => void;
    export let editForm: (formName: string) => void;
    export let copyFormToClipboard: (form: FormDefinition) => void;
    export let openInTemplateBuilder: (form: FormDefinition) => void;
    export let openImportFormModal: () => void;

    export let forms: Readable<FormDefinition[]>;
    export let invalidForms: Readable<MigrationError[]>;
    console.log({ Button, KeyValue, Separated }); // Removing this line leads to a runtime error
</script>

Logs

app.js:1 Failed to open view ReferenceError: Button is not defined
    at ManageForms (ManageForms.svelte:40:35)
    at eval (render.js:241:16)
    at update_reaction (runtime.js:283:53)
    at update_effect (runtime.js:455:18)
    at create_effect (effects.js:110:4)
    at branch (effects.js:315:9)
    at eval (render.js:227:3)
    at update_reaction (runtime.js:283:53)
    at update_effect (runtime.js:455:18)
    at create_effect (effects.js:110:4)
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
s @ app.js:1
Promise.then (async)
l @ app.js:1
a @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
t.open @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
a @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
t.setViewState @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
a @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
t @ app.js:1
o @ app.js:1
e.tryTrigger @ app.js:1
e.trigger @ app.js:1
t.trigger @ app.js:1
t.registerView @ app.js:1
t.registerView @ app.js:1
onload @ main.ts:234
await in onload (async)
e.load @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
a @ app.js:1
Promise.then (async)
l @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
e.loadPlugin @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
e.enablePlugin @ app.js:1
reload @ plugin:hot-reload:102
await in reload (async)
eval @ plugin:hot-reload:84
Promise.then (async)
run @ plugin:hot-reload:12
eval @ plugin:hot-reload:84
l @ app.js:1
c @ app.js:1
setTimeout (async)
u @ app.js:1
onFileChange @ plugin:hot-reload:86
checkVersions @ plugin:hot-reload:51
await in checkVersions (async)
eval @ plugin:hot-reload:16
Promise.then (async)
run @ plugin:hot-reload:12
eval @ plugin:hot-reload:16
l @ app.js:1
c @ app.js:1
setTimeout (async)
u @ app.js:1
e.tryTrigger @ app.js:1
e.trigger @ app.js:1
t.trigger @ app.js:1
t.onChange @ app.js:1
e.trigger @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
(anonymous) @ app.js:1
v @ app.js:1
e.reconcileFile @ app.js:1
(anonymous) @ app.js:1
n @ app.js:1
Promise.then (async)
e.queue @ app.js:1
(anonymous) @ app.js:1
setTimeout (async)
e.onFileChange @ app.js:1
(anonymous) @ app.js:1
emit @ node:events:513
FSWatcher._handle.onchange @ node:internal/original-fs/watchers:215

### System Info

```shell
System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M2 Pro
    Memory: 114.00 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/.asdf/installs/nodejs/18.18.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.11.0 - ~/.asdf/installs/nodejs/18.18.0/bin/pnpm
    bun: 1.0.26 - ~/.bun/bin/bun
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    svelte: ^5.0.0-next.175 => 5.0.0-next.175

Severity

blocking an upgrade

[danielo515]

I have an open-pr where this issue happens: danielo515/obsidian-modal-form#300

[dummdidumm]

My guess: This has to do with svelte-preprocess. I see that you're setting verbatimModuleSyntax to false in your tsconfig, but this is required in svelte-preprocess version 6 (https://github.com/sveltejs/svelte-preprocess/blob/main/docs/migration-guide.md#from-v5-to-v6)

[danielo515]

That is a good guess. However, I already updated to latest svelte-preprocess (6.0.1) and esbuild-svelte and the problem persists. Should I report this there?

[dummdidumm]

See my updated comment: You need to enable verbatimModuleSyntax in your tsconfig.json

[danielo515]

Oh, true. How could I overlooked that? I read the migration guide (I mean, the 3 bullet points!)

[danielo515]

Wow, that raises 50 compile time errors, while keeping the same runtime ones. Let's see if fixing those I get rid of the problem

[danielo515]

That fixed the problem. Thank!