toolingなくてもパスエイリアス設定できるんだよ

ディレクトリ数の多いプロジェクトによく馴染みがあると思います

import '../../../../components/checkbox.jsx'

ドットが多くて目障りです😆。みんなはtoolingに頼り、よくあるのはtypescripttsconfig.jsonのcompilerOptions.pathsを設定しますね

tsconfig.json

{
  "compilerOptions": {
    ....
    "baseUrl": "src",
    "paths": {
      "@/components/*": ["./src/components/*"], // 👈👈ここで設定してます
    },
    ....
  },
    ....
}

以下のようにドットが省略される

import '@/components/checkbox.jsx'

webpackのresolveやyarnのPortalも似たような役割を果たしますね

このためtoolingに頼る必要になり、互換性の問題を引き起こしたり、頭抱えてしまうこともあります。しかし実は、良く知られていないが、ネイティブの解決策は常にあります。

package.jsonのimports

node　v12から存在していたらしい

以下のように設定します

package.json

{
  "$schema": "https://json.schemastore.org/package.json",
  "imports": {
    "#components/*": "./src/components/*"
  }
}

エントリーは#に限られ、tsconfigのように@でやるの出来ない模様。

import '#/components/checkbox.jsx'