More than 3 years have passed since last update.

create-react-app で絶対パス(absolute path) をwebpack に頼らず設定する #react

Last updated at 2020-01-08Posted at 2019-05-07

ReactでAbsolute Pathを設定するときに以前と変わっていたので共有も含めて更新！

どういうことかというと
以下のようなファイル構成のときに

|- src
 |- components
  |- Profile
   |- index.jsx
  |- common
   |- Avatar.jsx

ProfileのIndex.jsxからAvatar.jsxを参照するときに

import Avatar from '../common/Avatar'

のように書かなければならないが、以下の設定をすることで

import Avatar from 'common/Avatar'

とかけるようになる！

.env ファイルを作って以下のように定義していた

.env

NODE_PATH=src

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

これまで通り開発しようとしたらすぐに分からず1~2時間ほどハマっていた（汗）

しっかりと公式ドキュメント見ていくべきだった。。

create-react-app で 絶対パス(absolute path) をwebpack に頼らず設定する #react