Fix go to definition and hot reload in a react typescript monorepo

Make hot-reload and go to definition work in a react typescript Monorepo with Lerna , Yarn and Craco using path mapping

vscode screenshot with Go to definition option on a code import
Go to definition option in vscode

TL;DR

Justification

root
├── package.json
├── tsconfig.json
└── packages
├── base-react-package
│ ├── src
│ │ └── index.tsx
│ ├── package.json
│ └── tsconfig.json
├── package-a
│ ├── src
│ │ └── index.tsx
│ ├── package.json
│ └── tsconfig.json
└── package-b
├── src
│ └── index.ts
├── package.json
└── tsconfig.json
/* base-react-package/src/index.ts */
import { AndyBernard } from “@root/package-a”;
/* package-a/package.json */
"name": "@root/package-a",
"main": "dist/index.js",

Solution: help the IDE and typescript compiler to resolve the monorepo modules in dev mode

Go To Definition

Hot-Reload

Solution: modify the base-react-package to watch for changes outside /src

A student of the world ; My brain has too many tabs open ; 🇰🇪; www.muguku.co.ke