javascriptvite

What does "~" (tilde) mean in the import ... from "~/"

I just spotted "~/" in some of js imports

import { Foo, Bar, Baz } from "~/types/schema"

This is mildly confusing because "~" usually meant the $HOME directory. And for the life of me - I can't google the answer.

The only answer I found was this What is the ~ (tilde) doing in this javascript import? dealing with import {IDispatch} from '~react-redux~redux'; which uses the tilde sign, but not as in the path ~something instead of ~/something)

Solution

  • This might be part of the frontend tooling that one is using, like Webpack or Vite. For example:

    1. If you're using webpack ~ might be resolving to node_modules. Check your config for resolvealias feature. But beware, that it seems it might come from other dependencies. See the answer here https://stackoverflow.com/a/43226632/299774 and also the discussion in the comments.

    2. If you're using vite: it resolves ~ to sourceCodeDir. So check your config for sourceCodeDir value. See https://vite-ruby.netlify.app/guide/development.html#import-aliases-%F0%9F%91%89 and https://vite-ruby.netlify.app/config/#sourcecodedir

    3. Also Typescript has paths feature to specify module mappings. See this answer for more details: https://stackoverflow.com/a/58522502/3789527