Component not defined after import? (Svelte/Typescript)

help
1

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!

2

maybe @zodern can give you a hand here

4

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.

5

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

1 Like
6

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
7

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

8

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.

edit: github issue: Enable tsconfig preserveValueImports · Issue #23 · zodern/melte · GitHub

9

I tried it again and it seems to be working now - weird. Looks like you have to delete the local folder for this option to take effects.