Alias is not resolved

[numfin]

Describe the bug
I used import alias @/ and it worked. Then i switched to Vite and it supports only root aliases. So i switched my code to use /@/ aliases. It compiles and works in browser, but gives me an error in vscode:

To Reproduce
Use /@/ import

Expected behavior
Everything works

System (please complete the following information):

• OS: Ubuntu
• IDE: VSCode
• Plugin/Package:"Svelte for VSCode"

[jasonlyu123]

You'll also have to configure the alias for typescript though tsconfig/jsconfig.json

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

[cayter]

I'm also facing the same issue which tsc can compile it just fine. However, tools like svelte-check won't be able to resolve the alias path correctly and throw errors like OP. It seems like there's a bug related to language-tools not able to resolve tsconfig.json in the project folder correctly?

[jasonlyu123]

That error is because we have used some special property injected by svelte2tsx to do component type-check. If we can't find the actual file we can't transform the file using svelte2tsx.

@cayter where do you put your tsconfig?

[cayter]

@jasonlyu123 Below is my project folder structure which happens to be a monorepo for both backend/frontend:

.
├── Makefile
├── README.md
├── database
│   └── database.rules.json
├── firebase.json
├── firestore
│   ├── firestore.indexes.json
│   └── firestore.rules
├── functions // backend code
│   ├── package-lock.json
│   ├── package.json
│   ├── src
│   │   └── index.ts
│   └── tsconfig.json
├── hosting // frontend PWA code
│   ├── ...
│   ├── src
│   │   ├── components
│   │   │   ├── App.svelte
│   │   │   └── ...
│   │   ├── images
│   │   │   ├── cover.png
│   │   │   └── ...
│   │   ├── index.css
│   │   ├── index.ts
│   │   ├── pages
│   │   │   ├── Auth
│   │   │   │   └── ...
│   │   │   ├── Error
│   │   │   │   └── ...
│   │   │   ├── Home
│   │   │   │   └── ...
│   │   │   └── User
│   │   │       └── ...
│   │   └── stores
│   │       └── ...
│   ├── svelte.config.js
│   ├── tailwind.config.js
│   ├── tsconfig.json
│   ├── vite.config.ts
│   └── workbox.config.js
├── package-lock.json
└── package.json

hosting/tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "baseUrl": "src",
    "declaration": true,
    "emitDecoratorMetadata": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "forceConsistentCasingInFileNames": true,
    "importHelpers": true,
    "importsNotUsedAsValues": "error",
    "isolatedModules": true,
    "lib": ["dom", "esnext", "es6"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "rootDir": "src",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictBindCallApply": true,
    "strictFunctionTypes": true,
    "strictPropertyInitialization": true,
    "strictNullChecks": true,
    "target": "esnext",
    "types": ["jest", "node", "svelte"],
    "paths": {
      "/@/*": ["*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules/*", "public/*"]
}

[cayter]

If we can't find the actual file we can't transform the file using svelte2tsx.

Yep, this is relevant to alias path resolving defined in the project's tsconfig.json is not being honoured. So, if we change it to relative path instead of using alias path, the vscode extension and svelte-check will not throw any error anymore which you can see from OP's screenshot for the ComboBox component.

[jasonlyu123]

Can you check the output channel of vscode, chose svelte in the dropdown on the right. And see if you have something like this
Initialize new ts service at c:/Current Projects/svelte-app/tsconfig.json and post the log here.

[dummdidumm]

I can reproduce this. For some reason getDefinitionAndBoundSpan can deal with TS/JS files imported from such locations, but not with .svelte files.

[dummdidumm]

The problem is inside our module-loader, which delegates to the normal TS resolution because the check for "is absolute path" is true (file paths starting with / are absolute in linux). I think we need additional checks for "is this prefix part of tsconfig paths".

[jasonlyu123]

OP actually said it works with @/ and I missed it. Sorry 😅

[numfin]

I forgot to say how awesome you guys are. Thank you for quick response