reactjs - No se pueden configurar importaciones de módulos absolutas en un monorepo

Estoy intentando configurar importaciones absolutas en un proyecto de React/TypeScript, pero no puedo encontrar una solución para mi caso. Siempre obtengo el mismo error:

ERROR in ./src/app/App.tsx 18:14-37

Module not found: Error: Can't resolve 'common/hooks' in '/home/artem/Desktop/drum-school/webapp/src/app'

La validación de VSCode no resalta ningún error con mis importaciones, pero al compilar ocurre este error. Probé diferentes variaciones de tsconfig.json, pero el error persiste. Aquí está mi configuración actual:

{
  "compilerOptions":{
    "jsx": "react-jsx",
     "module":"CommonJS",
     "moduleResolution":"node",
     "noImplicitAny":true,
     "outDir":"./public/",
     "preserveConstEnums":true,
     "removeComments":true,
     "sourceMap":true,
     "target":"es5",
     "baseUrl": "src",
  },
  "include": ["src"]
} 

También intenté "baseUrl": "./src", "baseUrl": "./", "baseUrl": "." con paths, pero aún sin efecto.

Una de las importaciones:

import { useTypedSelector } from "common/hooks";

common/hooks.ts:

import { useDispatch, useSelector } from "react-redux";
import type { TypedUseSelectorHook } from "react-redux";
import type { RootState, AppDispatch } from "app/store";

const useTypedDispatch = () => useDispatch<AppDispatch>();
const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

export { useTypedDispatch, useTypedSelector };

Supuse que este error puede ocurrir porque nuestro equipo está usando un monorepo. Aquí está la estructura de archivos:

├── backend
│   ├── backend-files
│   └── backend-files
│       
└── webapp
    ├── package.json
    ├── tsconfig.json
    └── src
        ├── app
        │    ├──App.tsx     (import is here)
        │    └──otherFiles
        ├── common
        │    ├──hooks.ts    (export is here)
        │    └──otherFiles
        ├── otherFiles
        └── index.tsx

Estaré agradecido si me explicas qué estoy haciendo mal y me muestras cómo resolver el problema. ¡Gracias!

Respuesta #1

¡Finalmente encontré la solución!

En tsconfig.json:

"baseUrl": ".",
"paths": {
   "common/*": ["src/common/*"],
   "app/*": ["src/app/*"]
}

También agrega

resolve: {
   alias: {
      "common": path.resolve(__dirname, 'src/common/'),
      "app": path.resolve(__dirname, 'src/app/'),
   },
   extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
},

al archivo de configuración de webpack.