Решаем ад импортов в Create React App: алиасы через CRACO или react-app-rewired

Очень важно иметь единообразные import-конструкции в твоих react-проектах и избегать ада относительных путей: например, ../../../utils/smth.ts выглядит намного уродливее, чем ~/utils/smth.ts.

К сожалению, последние версии typescript поддерживают этот трюк всё хуже и хуже (если честно, не знаю почему).

Используем пакет @craco/craco

Шаги установки:

1. yarn add @craco/craco

2. Создай файл craco.config.js в корне проекта

3. Помести текст ниже в craco.config.js:

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

4. Измени react-скрипты в package.json на:

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

5. Запусти проект и проверь, что всё работает: yarn start

Используем react-app-rewired и customize-cra

Шаги установки:

1. yarn add react-app-rewired

2. yarn add customize-cra

3. В config-overrides.js добавь эти строки:

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

4. И не забудь добавить похожие алиасы в tsconfig.json:

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