Typescript pnpm monorepo, path aliases conflicts between local dependencies during build

Question

I have a PNPM with TurbeRepo monorepo, used this template. In this monorepo I have a NextJS app that uses a ui-shared package (local shared code, not actually an npm package).

The ui-shared is made in the likes of but my package is of course much bigger. With a index.ts that exports all of the components and shared utils.

UPDATE: Added a minimal repo that reproduces the problem

When building the ui-shared it successfully builds, but when I build the Nextjs app the ui-shared build fails as it fails to resolve the path from tsconfig. So after a couple of days of detective work I managed to single out what I believe to be the issue. When the next app builds, it builds also the ui-shared and that fails because the path now is based on nextjs and not the library itself. I am not sure this is the cause but I believe it is, and I don't know how can I fix that

(Shared package or package is how I'll refer to ui-shared)

Buiding the shared package results in success

ESM ⚡️ Build success in 112ms
ESM dist/index.mjs 220.69 KB
DTS Build start
DTS ⚡️ Build success in 4792ms

Parts of package.json

  "main": "./src/index.ts",
  "module": "./dist/index.mjs",
  "types": "./src/index.ts",
  "scripts": {
    "lint": "eslint *.ts*",
    "build": "tsup ./src/index.ts --format esm,cjs --dts --external react",
    "dev": "tsup ./src/index.ts --format esm,cjs --watch --dts --external react"
  },

The tsconfig of the package

{
  "extends": "tsconfig/react-library.json",
  "compilerOptions": {
    "baseUrl": ".",
    "resolveJsonModule": true,
    "allowJs": true,
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx"],
  "exclude": ["dist", "build", "node_modules"]
}

---

When I run the build of the NextJs app I get this error

pnpm build

> @company/[email protected] build /work/company/monorepo/apps/business
> next build

See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Skipping linting
info  - Checking validity of types .Failed to compile.

../../packages/ui-shared/src/components/AnimatedLoadingMedia.tsx:9:23
Type error: Cannot find module '@/utils/clsxm' or its corresponding type declarations.

   7 | } from "react";
   8 | 
>  9 | import { clsxm } from "@/utils/clsxm";
     |                       ^
  10 | 
  11 | type AnimatedLoadingMediaProps = {
  12 |   isVideo: boolean;

> Build error occurred
Error: Call retries were exceeded
    at ChildProcessWorker.initialize (/work/company/monorepo/node_modules/.pnpm/[email protected]_twoewwu6sg7cdf3ao6njtbftne/node_modules/next/dist/compiled/jest-worker/index.js:1:11661)
    at ChildProcessWorker._onExit (/work/company/monorepo/node_modules/.pnpm/[email protected]_twoewwu6sg7cdf3ao6njtbftne/node_modules/next/dist/compiled/jest-worker/index.js:1:12599)
    at ChildProcess.emit (node:events:390:28)
    at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12) {
  type: 'WorkerError'
}

Nextjs app tsconfig

{
  "extends": "tsconfig/nextjs.json",
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "baseUrl": ".",
    "module": "esnext",
    "paths": {
      "@/*": ["src/*"],
      "@": ["src"],
      "@public/*": ["public/*"],
      "@public": ["public"]
    },
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Somehow the library has to resolve its own paths when being built from nextjs. Or even better the library should be built in its own scope and the nextjs should only consume the outputs. I have no idea if it can work like that

I tried adding third party libraries but like tsc-alias tsconfig-path and so on. But the build keeps failing. I tried to see and somehow stop nextjs from building the package but I couldn't find a way