Importowanie absolutne w Create React App

Jak pozbyć się zagnieżdżonych ścieżek w pejekcie.
Np. taka nieładna ścieżka jak poniżej.

import TopImage from '../../../components/TopImage/TopImage';

Chcemy mieć coś takiego, czy do foldera components czy do containers czy innych folderów w src.

import TopImage from 'components/TopImage/TopImage';

Najprościej jak można to tworzymy plik w folderze src o nazwie .env tak z kropką na początku.
W nim wpisujemy NODE_PATH=src/ robimy save i uruchamiamy project jak zwykle przez npm run start

Od tej chili zamiast podawać całą ścieżkę podajemy components, containers, hoc czy inne foldery jakie mamy w projekcie.

Innym sposobem jest modyfikacja package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

Dodajemy NODE_PATH=src/

"scripts": {
   "start": "NODE_PATH=src/ react-scripts start",
   "build": "NODE_PATH=src/ react-scripts build"
}

Jest jeden problem z użytkownikami windowsa jak zwykle 😉 NODE_PATH=src/ w package.json nie zadziała.
Należy zainstalować moduł cross-env czyli npm install --save-dev cross-env i zmodyfikować package.json, oczywiście to tylko w wypadku windowsa.

"scripts": {
   "start": "cross-env NODE_PATH=src/ react-scripts start",
   "build": "cross-env NODE_PATH=src/ react-scripts build"
}

I to tyle chyba ten pierwszy sposób jest mniej inwazyjny i powinien zadziałać na wszystkich platformach.