The path alias feature in Sveltekit seems to be malfunctioning

I've been working with Svelte Kit (using TypeScript) and I'm having trouble getting the new link "$base" to work for my shortlinks. I've added the shortlink information below:

./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"]
}

There is also no intellisense available https://i.sstatic.net/Yaje8.png

For more details about jsconfig.json, click here

I came across a similar issue with NEXT here

Even after trying this, it didn't seem to work

In addition to updating jsconfig.json file, I also tried adding the paths to my tsconfig.json file as follows:

{
    "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/*"]
      }
}
javascripttypescriptvisual-studio-codesveltekit

Answer №1

For those looking to customize their Svelte project paths, consider updating the svelte.config.js file within your project root directory.

...
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;

Note: The latest versions of SvelteKit now require using 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;

Answer №2

This new method eliminates the need for a vite configuration file.

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

const config = {
    ...
    kit: {
        ...
        alias: {
            $components: path.resolve('./src/components')
        }
    }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mobile version experiencing issue with Navbar not collapsing

The dropdown navigation bar on the mobile version of my website is not functioning properly. Despite several attempts, I have been unable to figure out a way to make it work effectively. <!DOCTYPE html> <html lang="en"> <head> & ...

javascriptjquerycssbootstrap-5

Combining react-md with material-ui components: A step-by-step guide

Is it possible to combine react-md and material-ui components together? I am attempting to utilize components from both libraries, however they seem to conflict with each other's styles. Do you have any suggestions or solutions? ...

javascriptreactjsmaterial-ui

The function window.document.execCommand() appears to be malfunctioning

Within my AngularJS application, I am attempting to utilize a dummy input element to copy a string into the clipboard. The code snippet below is triggered when the 'on-share-link-made' event is broadcasted, setting the value of the input element ...

javascriptangularjsdom

Tips for passing an array to a different function using Jquery

I need to pass an array to another function <div id="test"></div> <div id="test2"></div> <input type="button" value="chk" id="go" /> <script> $(function() { var c = 1; var i = 5; var dat ...

javascriptjqueryarrays

What is the most effective way to determine the data type of a variable?

My search skills may have failed me in finding the answer to this question, so any guidance towards relevant documentation would be appreciated! I am currently working on enabling strict type checking in an existing TypeScript project. One issue I'v ...

typescript

The process of retrieving matching strings from two collections in MongoDB

There are two collections: Collection A consists of: -> {"_id": .... , "data":"demon"} -> {"_id": .... , "data":"god"} and Collection B consists of: -> {"_id": .... , "tit ...

javascriptmongodbmongodb-query

Issue with react-router-dom: <Route> elements are strictly meant for configuring the router and should not be rendered on their own

I've been grappling with this issue for quite some time now, but none of my attempts have succeeded and I keep encountering the same error: < Route> elements are for router configuration only and should not be rendered Here's the snippet ...

javascriptreactjsreact-redux

Issue: Dependency type ContextElementDependency does not have a corresponding module factory available

After cloning the project from GitLab and running npm install, all dependencies were successfully downloaded. However, upon executing npm start, I encountered an error stating "No module factory available for dependency type: ContextElementDependency." In ...

javascriptnode.jsangularnpmnpm-install

Tips for aligning text vertically in flexbox arrangements

As I work on building my portfolio, I have implemented links as buttons using flexbox to make responsiveness easier. The height of these flexboxes is set dynamically using JavaScript with percentages. Despite trying various suggestions, none of them provi ...

javascripthtmlcssflexbox

Tips on implementing href with "javascript:window.open..." in AngularJS

I've been trying to utilize an anchor tag in my HTML code to open a new modal browser window with a URL retrieved through an Angular value like this: <a href="javascript:OpenPopUpPage('{{listing.Linktest}}');">Test Link</a> Alt ...

javascripthtmlangularjs

Is it possible to modify the labels on CKEditor's toolbar elements?

Initializing CKEditor in the following manner: function init() { $( ".ckeditor" ).ckeditor( { format_tags: 'h3;p', toolbar: [ [ "Source", "-", "Bold", "Italic" ], [ "Link", "Unlink" ], [ "Blockquote", "F ...

javascriptjqueryckeditorlabeltoolbar

Is it possible to create a Cypress report that only includes the successful test cases and excludes the failed ones?

Hello everyone, I trust you are well. Currently, I am seeking a solution to exclude failed test cases from Cypress XML report when using Junit as a reporter. The issue arises when importing test results into Jira, as failures create duplicate tests instead ...

typescriptseleniumcypressui-automationjira-xray

Managing various swipe interactions using HTML and JavaScript/jQuery

I'm in the process of creating a mobile multiplayer game using HTML5 and Javascript. The jQuery Plugin "touchwipe" is utilized to manage swipe events in various divs like this: $('#play1').touchwipe({ wipeLeft: function(){ if ...

javascriptandroidhtmliosswipe

steps for executing a Google script

In my program, the structure is as follows: // JavaScript function using Google Script 1. function F1() { ...... return (v1); } // HTML code for Google 1. <script> 2. function F2() { 3. alert ( 1 ); 4. function F2(); 5. alert ( 2 ); 6 ...

javascripthtmlgoogle-apps-script

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

I've been working on recreating a design using HTML, CSS/SCSS in Angular. The design can be viewed here: NFT Landing Page Design Here is a snippet of the code I have implemented so far (Typescript, SCSS, HTML): [Code here] [CSS styles here] [H ...

htmlcssangulartypescriptsass

Is the memory usage of node.js proportional to the number of concurrent requests, or is there a potential memory leak?

Running the following node.js code: var http = require('http'); http.createServer(function(req,res){ res.writeHead(200,{'Content-Type': 'text/plain'}); res.write("Hello"); res.end(); }).listen(8888); Upon starting the server ...

javascriptnode.jsmemory-leaks

When attempting to change the text in the textarea by selecting a different option from the dropdown list, the text is not updating

I am facing an issue with three multi-select dropdown lists. When a user selects options from these lists and then presses the submit button, the selected text should display in a textarea. However, if the user manually changes some text in the textarea ...

javascripthtmljqueryasp.netmodel-view-controller

Identifying when two separate browser windows are both open on the same website

Is it possible to detect when a user has my website open in one tab, then opens it in another tab? If so, I want to show a warning on the newly opened tab. Currently, I am implementing a solution where I send a "keep alive" ajax call every second to the s ...

javascriptphpjqueryajax

Is it possible to pass props in React-Native without relying on the navigator component

Is there a way to pass properties to a webview without using navigator? I am working on updating the source for a WebView in my index.ios.js file while keeping the song playing throughout the app. In my index.ios.js, I have an invisible iframe that allows ...

javascriptiosreactjsreact-native

Implement a Codeigniter model that utilizes JavaScript to insert an ID

Is there a way to retrieve the productid value in PHP code? function getunitstock(){ var productid = document.getElementById('product').value <?php $prodbyid = $this->pos_model->get_productbyid(+productid+)?> document. ...

javascriptphpcodeigniter