Vite: Import module mapping / custom path resolution

[Micene09]

Taking inspiration from the following:

• Typescript path mapping
• Webpack's resolve.alias

...would be nice to have a custom path mapping, just to have a sexier import paths, ex:

// example.ts
import { Store, GlobalModule, AppModule } from "@app-utils/store-manager";
import { ICenter } from "@app-rest/centers";
import { ICompany } from "@app-rest/companies";
import MyModal from "@app-components/my-modal/my-modal.vue";

...instead of relative paths like:

import { Store, GlobalModule, AppModule } from "../../store-manager";
import { ICenter } from "../../../centers";
...

Currently on Vue CLI 3 (Webpack), to achieve this feature, i'm using tsconfig-paths-webpack-plugin ...but for a non-typescript related builder like vite i suggest to go for a config file (and maybe an API to extend this behaviour?).

[yyx990803]

Internally there is already a resolver that does this (see vitepress' resolver for example)

But we probably will provide an easier to use format in the config.

[nanaian]

I propose supporting import maps rather than using special vite-specific config.

[ais-one]

For using import maps please consider also the discussions below...

• https://github.com/mozilla/standards-positions/issues/146
• https://github.com/denoland/deno/issues/4931

[nestarz]

Don't know if it can help but I just made a package manager (here) that use import maps spec resolver.

[yyx990803]

alias option is now supported via the config file. Will consider supporting import maps if it gets closer to being standardized.

[aleclarson]

I've published vite-tsconfig-paths to solve this problem:
https://github.com/aleclarson/vite-tsconfig-paths

Also, retweet this if you'd like:
https://twitter.com/alecdotbiz/status/1291095881262010371

[spikyjt]

For anyone finding this and wondering how to set up Typescript paths in a Vite project:

• You must set up your paths with leading slashes, e.g.
  json "paths": { "/@/*": [ "src/*" ] }

• Add your paths to the alias property in vite.config.js in the root of your project, e.g.

  const path = require('path');
  
  module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, 'src')
  }
  };
  

[axetroy]

For anyone finding this and wondering how to set up Typescript paths in a Vite project:

• You must set up your paths with leading slashes, e.g.
  json "paths": { "/@/*": [ "src/*" ] }

• Add your paths to the alias property in vite.config.js in the root of your project, e.g.

  const path = require('path');
  
  module.exports = {
  alias: {
    '/@/': path.resolve(__dirname, 'src')
  }
  };
  

ham.... This did not work for me. 😥

import { defineComponent } from "vue";
import { api } from "@/api"; // error here

[ynte]

ham.... This did not work for me. disappointed_relieved

import { defineComponent } from "vue";
import { api } from "@/api"; // error here

You need to start with the forward slash in your import statement as well

import { api } from "/@/api";

As an addition the comment by @spikyjt: I needed to set the baseUrl option in my tsconfig.json to make the alias be recognized by typescript. So I think the minimal config to get started with this is:

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

[spikyjt]

@ynte thanks for filling in the gaps. @axetroy I'd written this from the point of view of someone who already used paths with typescript and therefore would know that baseUrl is a requirement to use paths. I wasn't being thorough enough to give a complete example for someone starting from scratch and unfamiliar with paths!

FYI, the @ isn't required, it is just a convention for starting path aliases, to help distinguish from absolute paths. It would be ideal if Vite could support a custom prefix for aliases or at least support @ as well as /, to fit with the convention.

[adapap]

To those who may still be looking for a solution to this problem, I have found a way to use customizable aliases with little complication.

vite.config.ts

const pathAliasMap = {
  '@/': '/src/',
  '@components/': '/src/components/',
  '@views/': '/src/views/',
}

export default {
  resolvers: [
    {
      alias(path: string) {
        for (const [slug, res] of Object.entries(pathAliasMap)) {
          if (path.startsWith(slug)) {
            return path.replace(slug, res)
          }
        }
      },
    },
  ],
}