0

I am using svelte kit (with typescript) and have some created some shortlinks and cannot get the new link "$base" to work. I added the shortlink here

./jsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "baseUrl": ".",
    "paths": {
      "$lib":   ["src/lib"],
      "$lib/*": ["src/lib/*"],
      "$base":  ["src/baseApp"],
      "$base/*":["src/baseApp/*"]
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
}

The is also no intellisense enter image description here

More details about jsconfig.json here

I also found something about a similar issue with NEXT here

I tried this and it didn't work

In addition to jsconfig.json I tried adding my the paths to my tsconfig.json file also

{
    "extends": "./.svelte-kit/tsconfig.json",
    "compilerOptions": {
        "allowJs": true,
        "checkJs": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "skipLibCheck": true,
        "sourceMap": true,
        "strict": true
    },
    "paths": {
        "$lib":   ["src/lib"],
        "$lib/*": ["src/lib/*"],
        "Base":  ["src/baseApp"],
        "Base/*":["src/baseApp/*"]
      }
}
Paul A
  • 387
  • 3
  • 13

2 Answers2

4

Try adding your paths to the svelte.config.js file in the root of your project

...
import path from 'path';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    ...
    kit: {
        ...
        vite: {
            resolve: {
                alias: {
                    $lib: path.resolve('./src/lib'),
                    $base: path.resolve('./src/baseApp'),
                }
            }
        }
    }
};

export default config;

Edit: Newer versions of sveltekit uses vite.config.js instead

import { sveltekit } from '@sveltejs/kit/vite';
import path from "path"

const config = {
    resolve: {
        alias: {
            '$lib': path.resolve('./src/lib/'),
            '$base': path.resolve('./src/baseApp'),
        },
    },
    plugins: [sveltekit()]
};

export default config;
notnavindu
  • 487
  • 1
  • 6
  • 18
  • This did not work for me- but if I put the vite config into vite.config.js, then it worked (instead of svelte.config.js) – TomG Aug 02 '22 at 20:45
2

This is the latest way of implementing it. No need for vite config file

https://kit.svelte.dev/docs/configuration#alias

//svelte.config.js
import path from 'path';

const config = {
    ...
    kit: {
        ...
        alias: {
            $components: path.resolve('./src/components')
        }
    }
};
Mike Mikesen
  • 51
  • 3