Resolviendo el infierno de las rutas de importación en Create React App: alias con CRACO o react-app-rewired

Es muy importante tener declaraciones de import consistentes en tus proyectos react, y evitar el infierno de las rutas relativas, ej. ../../../utils/smth.ts se ve mucho más feo que ~/utils/smth.ts.

Desafortunadamente, las últimas versiones de typescript soportan este truco cada vez peor (no sé por qué, la verdad).

Usando el paquete @craco/craco

Pasos para la instalación:

1. yarn add @craco/craco

2. Crea el archivo craco.config.js en la raíz del proyecto

3. Pon el texto de abajo en craco.config.js:

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

4. Cambia los scripts de react en package.json a:

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

5. Inicia el proyecto y verifica que todo funcione: yarn start

Usando react-app-rewired y customize-cra

Pasos para la instalación:

1. yarn add react-app-rewired

2. yarn add customize-cra

3. En config-overrides.js agrega estas líneas:

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

4. Y no olvides agregar alias similares a tsconfig.json:

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