TL;DR

Use oklas/react-app-rewire-alias, it works.

Setup

Let’s say you have a monorepo that includes a CRA (create-react-app) project, Node.js API service as well as a shared Typescript types package next to it:

./app
   ./types
   ./react-ui
   ./api

You want to share types between react-ui and api. CRA can make this difficult. At the time of writing, CRA doesn't support tsconfig.json paths property and thus far none of the hacks found around the web work without some kind of CRA config customization. In fact, if you try to add paths, CRA will remove it on service start.

Solution

We’re gonna need some packages to make this work:

• timarney/react-app-rewired

Allows one to “Tweak the create-react-app webpack config(s) without using ‘eject’ and without creating a fork of the react-scripts”.

• oklas/react-app-rewire-alias

Alias and multi-source solution for CRA

yarn add -D react-app-rewired react-app-rewire-alias
or
npm install -save-dev react-app-rewired react-app-rewire-alias

Usually, we would put our paths aliases in tsconfig.json . CRA won't allow this as we saw before. We're gonna create two more files:

./app
  ./types
  ./react-ui
    ...
    ./config-overrides.js 
    ./tsconfig.paths.json
./api

First, tsconfig.paths.json, where path aliases are located:

By itself, this will not do everything, we'll use tsconfig.json's extends property to reference it:

And second, config-overrides.js, where our CRA override logic resides:

We also need to update our package.json scripts section for our overrides to take effect:

And that's it. If VSCode doesn't register your path, try reloading the project or window. If you know a better way to achieve this, please let me know.