Create-React-App: solving import help with aliases (or Craco)

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'), }, }, };

   1 2 3 4 5 6 7 8

   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" }

   1 2 3 4 5 6

   "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'), // ... })

   1 2 3 4 5 6 7 8

   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/*" ], },

   1 2 3 4 5

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

react react js typescript