Component not defined after import? (Svelte/Typescript)

This morning, I started working on the tutorial for Meteor using Svelte and (added) TypeScript.

When I try to complete step one (hardcoded Tasks w/o Collections), I’m greeted with the following error, and I have no idea why, because it should be working as far as I know:

Uncaught ReferenceError: Task is not defined

What I don’t understand is why this is happening. My App and Task components are in line with the tutorial itself, could this be a result of improperly set up TSConfig?

Current code is at: GitHub - czbak3r/meteor-tutorial-svelte: Meteor tutorial (from site) using Svelte+TS, or I can post snippets here directly if that’s preferred. Thanks!

maybe @zodern can give you a hand here

Upon further experimentation, this works as intended if and only if I console.log() the imported Task component in the App component before trying to render it.

Otherwise it continues to throw the “not defined” error with Task.

In your tsconfig you need to enable preserveValueImports, otherwise typescript will remove imports that are not used within the <script> tags.

1 Like

So, I’ve got that enabled in my tsconfig, but it’s still exhibiting the same behavior. Second component (being imported) is not being recognized unless it’s used. Here’s my tsconfig.json:

{
    "compilerOptions": {
      /* Basic Options */
      "target": "es2018",
      "module": "esNext",
      "lib": ["esnext", "dom"],
      "allowJs": true,
      "checkJs": false,
      "jsx": "preserve",
      "incremental": true,
      "noEmit": true,
  
      /* Strict Type-Checking Options */
      "strict": true,
      "noImplicitAny": true,
      "strictNullChecks": true,
  
      /* Additional Checks */
      "noUnusedLocals": true,
      "noUnusedParameters": true,
      "noImplicitReturns": false,
      "noFallthroughCasesInSwitch": false,
      "preserveValueImports": true,
  
      /* Module Resolution Options */
      "baseUrl": ".",
      "paths": {
        /* Support absolute /imports/* with a leading '/' */
        "/*": ["*"]
      },
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "types": ["node", "mocha"],
      "esModuleInterop": true,
      "preserveSymlinks": true
    },
    "exclude": [
      "./.meteor/**",
      "./packages/**"
    ]
  }

It almost feels like the tsconfig.json is being ignored entirely.

1 Like

Any thoughts as to why this seems to be ignoring tsconfig? It’s supposed to be in the project root, right?

same issue here, i have to reference every import within the script tag (eg in a console.log), otherwise it will get removed and thus is undefined later on.