Solving Import Path Hell in Create React App: Aliases with CRACO or react-app-rewired

It is very important to have consistent import statements in your react projects, and to preserve relative paths hell, ex. ../../../utils/smth.ts looks much more ugly than ~/utils/smth.ts.

Unfortunately, latest versions of typescript support this trick worse and worse (I don't know why, in fact).

Using @craco/craco package

Steps for installation:

1. yarn add @craco/craco

2. Make file craco.config.js in root of project

3. Put text below to craco.config.js:

   const path = require('path');
   module.exports = {
     webpack: {
       alias: {
         '~': path.resolve(__dirname, 'src'),
       },
     },
   };
   

4. Change react scripts in package.json to:

    "scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",
        "eject": "craco eject"
    }
   

5. Start project and check everything works: yarn start

Using react-app-rewired and customize-cra

Steps for installation:

1. yarn add react-app-rewired

2. yarn add customize-cra

3. In config-overrides.js add those lines:

   const { addWebpackAlias } = require('customize-cra');
   const path = require('path');
   
   //... in module.export of configuration section:
   addWebpackAlias({
     '~': path.resolve(__dirname, './src'),
     // ...
   });
   

4. And font forget to add similar aliases to tsconfig.json:

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