I have a monorepo with this structure:

tsconfig.json
webapp/
    arc/
    tsconfig.json
    tsconfig.app.json
    tsconfig.node.json
    vite.config.ts
shared/
    ui/
        src/
        tsconfig.json

Every time I import some component from this ui package in my webapp I get the same error:

src/App.tsx:3:47 - error TS2307: Cannot find module 'ui' or its corresponding type declarations.

import { MyComponent } from "ui";

The root tsconfig.json defines the ui alias:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ui/*": ["shared/ui/src/*"]     
    }
  }
}

shared/ui/tsconfig.json extends the root tsconfig.json and looks like this (I use the ui alias inside to reference other components and I get no errors from Typescript on build):

{
    "extends": "../../tsconfig.json",
    "compilerOptions": {
        "target": "ESNext",
        "module": "ESNext",
        "lib": ["DOM", "ESNext"],
        "jsx": "react",
        "declaration": true,
        "outDir": "dist",
        "rootDir": "src",
        "strict": true,
        "moduleResolution": "Node",
        "esModuleInterop": true,
        "skipLibCheck": true
    },
    "include": ["src"],
    "exclude": ["node_modules", "dist"]
}

webapp is a Vite project, so I defined the alias ui in vite.config.ts:

"ui": path.resolve(__dirname, "../shared/ui/src")

Here is the webapp/tsconfig.json:

{
    "extends": "../tsconfig.json",
    "files": [],
    "references": [
        {
            "path": "./tsconfig.app.json"
        },
        {
            "path": "./tsconfig.node.json"
        }
    ]
}

This is the webapp/tsconfig.app.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "composite": true,
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
        "target": "ES2020",
        "useDefineForClassFields": true,
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "module": "ESNext",
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "Bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "moduleDetection": "force",
        "noEmit": true,
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"]
}

And this is webapp/tsconfig.node.json:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "composite": true,
        "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
        "skipLibCheck": true,
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "noEmit": true
    },
    "include": ["vite.config.ts"]
}

Just in case this is shared/ui/package.json:

"name": "ui",
"main": "dist/index.js",
"types": "dist/index.d.ts"

I have already tried to use Node instead of Bundler as the moduleResolution as seen in other SO questions, adding shared/ui to the include list of the webapp tsconfig files or adding:

"references": [
    { "path": "../shared/ui" }
]

to the tsconfigs in webapp and "composite": true to ui/tsconfig.json but nothing seems to work and at this point I’m not sure what else can I do.