create-react-app Typescript 3.5, Path Alias

Issue

I am trying to setup Path alias in my project by adding these values to tsconfig.json:

  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@store/*": ["store/*"]
    },

And if I create an import, neither IntelliJ or VSCode bother me:

import { AppState } from '@store/index';

But when I compile the application I get this warning:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

And it bombs saying it cannot find the reference:

TypeScript error in C:/xyz.tsx(2,26):
Cannot find module '/store'.  TS2307

Is there any workaround or it is not supported by create-react-app --typescript?

Solution

The alias solution for craco or rewired create-react-app is react-app-rewire-alias for systems as: craco, react-app-rewired, customize-cra

According docs of mentioned systems replace react-scripts in package.json and configure next:

// config-overrides.js
const {alias, configPaths} = require('react-app-rewire-alias')

module.exports = function override(config) {
  return alias(configPaths('./tsconfig.paths.json'))(config)
}

Craco users config is little different:

// craco.config.js
const {CracoAliasPlugin, configPaths} = require('react-app-rewire-alias')

module.exports = {plugins: [{
  plugin: CracoAliasPlugin,
  options: {alias: configPaths('./tsconfig.paths.json')}
}]}

Configure aliases in json like this:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

And add this file in extends section of main typescript config file:

// tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  // ...
}

Answered By - oklas