6

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 int the path ~something instead of ~/something)

Greg
  • 5,862
  • 1
  • 25
  • 52
  • 1
    Does this answer your question? [What is the ~ (tilde) doing in this javascript import?](https://stackoverflow.com/questions/43113870/what-is-the-tilde-doing-in-this-javascript-import) – LS_ Oct 21 '22 at 13:38
  • Thanks for checking, but no, it doesn't. I've seen this answer before. Added a paragraph explaining how it is different. – Greg Oct 21 '22 at 13:57
  • 1
    No problem! [this](https://stackoverflow.com/a/58522502/3789527) might be relevant too – LS_ Oct 21 '22 at 15:41

1 Answers1

7

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

Greg
  • 5,862
  • 1
  • 25
  • 52
  • Your answer suggests that simply using Webpack or Vite at all would *automatically* resolve `~` to some directory in your project, but that's not correct. The `~` is resolved by an explicit configuration (Webpack's `resolve.alias` or Vite's `resolve.alias`). The alias is **not** "predefined" by Webpack like the answer you linked to would indicate. If `~` resolves correctly without your own config, then likely something else in your tech stack (e.g., Vite Ruby, as you've cited in your answer) is configuring the alias. – tony19 Oct 22 '22 at 01:08
  • [demo - Webpack does not preconfigure path alias](https://stackblitz.com/edit/webpack-webpack-js-org-9hn17z?file=src%2Ftypes%2Fschema.js,src%2Findex.js%3AL2-L2,package.json&terminal=build,start) – tony19 Oct 22 '22 at 01:09
  • [demo - Vite does not preconfigure path alias](https://stackblitz.com/edit/vitejs-vite-un8kwi?file=src%2Ftypes%2Fschema.ts,src%2Fmain.ts&terminal=dev) – tony19 Oct 22 '22 at 01:09
  • @tony19 thank you for the review, you are right! I updated the answer - please let me know if it's clearer now. – Greg Oct 24 '22 at 08:21
  • @tony19 @Greg Is it `sourceCodeDir` or is it `resolve.alias`?? – AlxVallejo May 17 '23 at 17:02
  • @AlxVallejo It depends on the tool you're using. webpack has one, vite has another. Is the answer not clear on that? – Greg May 22 '23 at 13:13