概要

絶対パスでimportしたい。

import Post from  '../../components/Post' 

↓

import Post from  'components/Post'

やり方

.envの設定

.envの中を下記のようにすることで、Webpack側でaliasが効くようになります。

NODE_PATH=src

ref) https://github.com/facebook/create-react-app/issues/2188#issuecomment-302040874

.tsconfigの設定

これだとTypeScript側が認識してくれないため、.tsconfigでもpathを貼る必要があります。

tsconfig.json

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

しかし、ただ書き加えてもreact-scripts startすると消されてしまいます...。
どうやらreact-scriptsが勝手に消してくるらしい。

そのため別ファイルに定義し、それをextendsすることでそれを回避します。

paths.json

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

tsconfig.json

{
  "extends": "./paths.json",
   ...
}

ref) https://stackoverflow.com/questions/53794875/how-to-configure-react-script-so-that-it-doesnt-override-tsconfig-json-on-star

おわり

これで絶対パスで読み取れるようになりました！

import Post from  'components/Post'

Webpackerもそうですが、こういうのは導入は便利でも改変しづらいのが面倒ですね。
生が一番です。