Typescript: Intellisense cannot find absolute path when using imports

Question

I am having problems regarding VS Code autocompletion and warning messages (red wiggly lines). Intellisense is giving me false warning when specifying absolute path for imports in typescript files. I am using Tauri and Svelte as framework.

I have made these simple files for debugging the problem:

src/my_app.ts:

import { my_value } from "@folder/my_test_file"

src/my/test/folder/my_test_file.ts:

export let my_value = 8;

tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "moduleResolution": "Node",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    /**
     * Typecheck JS in `.svelte` and `.js` files by default.
     * Disable checkJs if you'd like to use dynamic types in JS.
     * Note that setting allowJs false does not prevent the use
     * of JS in `.svelte` files.
     */
    "allowJs": true,
    "checkJs": true,
    "isolatedModules": true,
    "baseUrl": "./",
    "paths": {

      "@folder/*": [
        "src/my/test/folder/*"
      ],

      "@src/*": [
        "src/*"
      ]
    },

  },
  "include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
  "exclude": ["node_modules"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

My directory:

package.json:

{
  "name": "piping-system-solver",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "tauri": "tauri"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30",
    "@tauri-apps/cli": "^1.0.0-rc.13",
    "@tsconfig/svelte": "^2.0.1",
    "svelte": "^3.44.0",
    "svelte-check": "^2.2.7",
    "svelte-preprocess": "^4.9.8",
    "tslib": "^2.3.1",
    "typescript": "^4.5.4",
    "vite": "^2.9.9"
  },
  "dependencies": {
    "@tauri-apps/api": "^1.0.0-rc.6",
    "autoprefixer": "^10.4.7",
    "module-alias": "^2.2.2",
    "postcss": "^8.4.14",
    "split-grid": "^1.0.11",
    "svelte-drag-and-drop-actions": "^1.0.0",
    "tailwindcss": "^3.1.0",
    "vite-tsconfig-paths": "^3.5.0"
  }
}

The version of following extensions:

• Svelte for VS Code: v106.1.0
• TypeScript Hero: v3.0.0

In the file src/my_app.ts (and similarily in all my other .ts files), typescript keeps alerting the following warning over the line of code above:

"Cannot find module '@folder/my_test_file' or its corresponding type declarations."

...eventhough the code compiles and works. This also affects code completion when typing absolute paths. Though when specifying absolute paths within my .svelte files, this warning does not appear, and code completion works.

Here's an list of all mentionable trials, thoughts and observations:

1. Relative paths works, both compiling and Intellisenses suggestions.
2. All svelte files work flawlessly by specifying absolute paths (import { my_value } from "@folder/my_test_file" gives no error in .svelte files, and Intellisense suggest subfolders).
3. I've tried "Restart TS Server", but it does not help.
4. I've looked at this question which has alot of suggestions on how to solve this, but none of them works for me.
5. I have installed Typescript Hero.
6. I have installed vite-tsconfig-paths from this link
7. I've observed that Intellisense warnings and suggestions updates dynamically according to changes in the tsconfig.ts file, while the actual program only updates when closing- and reopening the window (npm run tauri dev).
8. Specifying absolute paths works in .svelte files, even if you remove the "paths" configuration in tsconfig.json, leaving no path aliases. It works by starting with "src" (example: "src/some/path/file"). Seems like the path alias "src" is built into svelte?
9. (new) I've noticed now, that in .svelte files, more things are being suggested when starting double quotes (.js files, .ts files, .json files, among them also folders), whilst in my .ts files, only modules are being suggested (image in front of suggestion according to this).

I'm also eager to know, if this could be a bug in Tauri, Svelte og Typescript.

Answer 1

It's not a bug. Seems to be issue with your configuration. Steps to make work:

1. Add "src/*.ts" to include array in tsconfig.json.
2. Add an alias to vite.config.ts: '@folder/': fileURLToPath(new URL('./src/my/test/folder/', import.meta.url)) (alternatively you can install vite-tsconfig-paths plugin and add to you vite.config.ts which does this step for you, based on the content of your tsconfig).

I.e. vite.config.ts should look like:

import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
      '@folder/': fileURLToPath(new URL('./src/my/test/folder/', import.meta.url))
    },
  },
});

Minimal working example project with the tsconfig.json and package.json you provided: https://stackblitz.com/edit/github-xg6eei?file=README.md. Note I can't rule out something else being up with your local configuration (typescript project config is complex) but you can work backwards from the above linked example working project config.