Svelte + TypeScript problem: Inner component is not defined

[p9malino26]

Hi. I am unable to get a Meteor app to work with Svelte + TypeScript. The issue is that if an outer (i.e. parent) component imports and uses an inner component (i.e. child), and the outer component has <script lang="ts"> , I get an exception in the browser that the inner component is undefined. Not sure if this is a problem with my setup or a bug. I have attached a demo zip file
demo.zip
containing a basic Meteor Svelte app which reproduces this issue on my machine. Happens in Meteor versions 2.16 and 3.0.1 .

Reproduction:
I run the command meteor run, and there are no errors in the command output. However, when I open the app in the browser, I get the following error in the browser console:

More information for you:
-The app works fine when I change the <script lang="ts> tags to <script> and change the TypeScript to vanilla JS, but I really want to be able to take advantage of the benefits that TypeScript offers.
-There is a workaround where if I reference the inner component from inside the <script> tag of the outer, it fixes the problem, but I would be quite ugly to do this when I have to import loads of components.
-Someone else had the same issue as me and posted about it on StackOverflow: https://stackoverflow.com/questions/74529394/why-is-my-svelte-component-undefined-in-meteor-project . They didn't report of fixing the issue. The workaround that I did also works for them.
-Happens in both Chromium and Firefox.
-svelte-preprocess is installed

If this is the wrong project to report this bug, please forgive me.

Thank you.

[zodern]

You probably need to enable this option in your tsconfig: https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax

With the current version of svelte-preprocess, component imports can be removed when the option is disabled.

[p9malino26]

This option was already enabled and it didn't have an effect unfortunately. Here is my
tsconfig.json

[p9malino26]

Just realised something interesting! This error only happens in the top level component (App.svelte), where its children are not defined. The other components work fine.

[Sergeant61]

Hello, I'm trying to solve Meteor 3 transition problems. I opened a pr for one of them zodern/melte-compiler#11. However, I could not find the cause of the ts problem. I also opened a topic in the Meteor forum and tried to explain the problem I was having. I hope it will be a guide. https://forums.meteor.com/t/meteor-js-v3-0-zodern-melte-compiler/62002

[Sergeant61]

@p9malino26 have you found any solution?

[p9malino26]

Sorry, didn't really have time to look into this. Will tell you once I look into this.

[Sergeant61]

Hello, although I do not know exactly what the problem is caused by, we are experiencing this problem in typescript version 5.5.4. I was able to run the project by fixing it to version 5.4.4.

...
"devDependencies": {
    "svelte-preprocess": "^5.1.4",
    "typescript": "5.4.4"
  },
...

[p9malino26]

Ok so it looks like I no longer have the issue in my project! (don't know what's happened), but I can reproduce the issue when I revert the project to an older Git commit. Will investigate into this deeper when I have time.