Svelte: Import by absolute path does not work

Question

I'm trying to import enums, objects, functions, and svelte components by using absolute paths to files, but the compiler can't find them.

This is how i do the imports:

<script lang=ts>
    import { MyEnum } from "src/lib/enums";
    ... code ...
<script/>

The VS Code compiler does not complain about the path.

I get the following error message on the window when running the app:

[plugin:vite:import-analysis] Failed to resolve import "src/lib/enums" from "src\lib\GUI\ObjectOnBoard.svelte". Does the file exist?
35 |  
36 |  const { Object: Object_1 } = globals;
37 |  import { MyEnum } from "src/lib/enums";
   |                              ^

I have done some research, and i've found out that there might be some issues regarding my config files, but i don't know how to configure these files in order to make the referencing work. These are the config files (the ones i think are relevant?) in my project:

vite.config.ts:

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
})

svelte.config.js:

import sveltePreprocess from 'svelte-preprocess'

export default {
  // Consult https://github.com/sveltejs/svelte-preprocess
  // for more information about preprocessors
  preprocess: sveltePreprocess(),
}

tsconfig.json:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "resolveJsonModule": true,
    "baseUrl": ".",
    /**
     * 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,
  },
  "include": ["src/**/*.d.ts", "src/**/*.{svelte,ts,js}"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Answer 1

Under Node module resolution (set by tsconfig/svelte ) those are not absolute file paths. They will interpreted as relative to a Node module, in this case src .

If you want to refer to a local file, you might have define a path alias first via the tsconfig.json :

{
    "compilerOptions": {
        "paths": {
            "src/*": [
                "src/*"
            ],
        },
        // ...
}

(If your baseUrl is '.' , then the src folder has to be at the same level as the configuration.)

When using Vite, you may also have to make its build system aware of the path mapping, there exists eg the package vite-tsconfig-paths which provides a plugin for that.

If you do not want the extra dependency or this does not work, you can specify the alias yourself in the vite.config.js :

// ...
import path from 'path';

export default defineConfig({
    // ...
    resolve: {
        alias: {
            src: path.resolve('src/'),
        },
    }
});

The Vite config step is important for the build to work, the tsconfig may be necessary to make editor tooling work (eg code completion and navigation in VS Code).