How to resolve absolute path using Vite and ESlint in Svelte?

Question

I have an import import icon from 'src/assets/icon.png', which I can't resolve.

I have "baseUrl": "." in jsconfig.json and

"settings": {
    "import/resolver": {
      "node": {
        "paths": ["."]
      }
    }
  }

in .eslintrc, but the thing is that if I use absolute import this way I get an error from Vite - [plugin:vite:import-analysis] Failed to resolve import "src/assets/icon.png" from "src\lib\Logo.svelte". Does the file exist?

At the same time if I add a forward slash before src in import like so import icon from '/src/assets/icon.png', it will work fine with NO error from vite, but eslint/no-unresolved-imports rule will give me a linting error.

I checked vite docs, but the only thing they offer is to use an alias for the path, which I'm not willing to do. Another workaround could be disabling the eslint rule, which is not an option for me either.

Question: Is there a way to resolve this path 'src/assets/icon.png' using "import/resolver" or vite's settings?

Answer 1

I found this page helpful in getting my setup working for absolute/aliased imports with Vite + React, but maybe it will be helpful to you too.

https://dev.to/abdeldjalilhachimi/how-to-avoid-long-path-import-using-react-with-ts-and-vite-4e2h

You don't have to define an alias for every folder - instead you use a dynamics alias that reads the directory name.

Add this to your vite.config.ts to set up the dynamic alias:

import * as path from 'path';

//...

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

Then in your tsconfig.json you can define the alias like so:

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

The baseUrl by itself almost worked well enough, but this solution seems to be more robust and lets me do exactly the kind of asset and module imports that you're talking about.

import logoPNG from '~/assets/logo.png';