What is the correct way to use library from core app in nx using vite ?

[popoleeMaster]

I have created an new NX project using Vite.

I setup a app and then generate a library using the generate react/library.
Add a component, export that component in index.ts of the library and add some path to the base tsconfig :

    "paths": {
      "~repo/shared/ui": ["libs/shared/ui/src/index.ts"]
    }

The tsconfig generated on the library looks like this :

{
  "extends": "../../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "dist",
    "types": [
      "node",
      "@nx/react/typings/cssmodule.d.ts",
      "@nx/react/typings/image.d.ts"
    ],
    "rootDir": "src",
    "jsx": "react-jsx",
    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
  },
  "exclude": [
    "out-tsc",
    "dist",
    "jest.config.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.ts",
    "src/**/*.spec.tsx",
    "src/**/*.test.tsx",
    "src/**/*.spec.js",
    "src/**/*.test.js",
    "src/**/*.spec.jsx",
    "src/**/*.test.jsx",
    "eslint.config.js",
    "eslint.config.cjs",
    "eslint.config.mjs"
  ],
  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
}

Now the tsconfig generated of my main app looks like this :

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "dist",
    "lib": ["DOM", "DOM.Iterable", "ES2019"],
    "types": ["@react-router/node", "vite/client", "node"],
    "esModuleInterop": true,
    "jsx": "react-jsx",
    "resolveJsonModule": true,
    "allowJs": true,
    "forceConsistentCasingInFileNames": true,
    "rootDir": "app",
    "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo"
  },
  "include": [
    "app/**/*.ts",
    "app/**/*.tsx",
    "app/**/*.js",
    "app/**/*.jsx",
    "**/.server/**/*.ts",
    "**/.server/**/*.tsx",
    "**/.client/**/*.ts",
    "**/.client/**/*.tsx"
  ],
  "exclude": [
    "out-tsc",
    "dist",
    "tests/**/*.spec.ts",
    "tests/**/*.test.ts",
    "tests/**/*.spec.tsx",
    "tests/**/*.test.tsx",
    "tests/**/*.spec.js",
    "tests/**/*.test.js",
    "tests/**/*.spec.jsx",
    "tests/**/*.test.jsx",
    "vite.config.ts",
    "vite.config.mts",
    "vitest.config.ts",
    "vitest.config.mts",
    "src/**/*.test.ts",
    "src/**/*.spec.ts",
    "src/**/*.test.tsx",
    "src/**/*.spec.tsx",
    "src/**/*.test.js",
    "src/**/*.spec.js",
    "src/**/*.test.jsx",
    "src/**/*.spec.jsx",
    "eslint.config.js",
    "eslint.config.cjs",
    "eslint.config.mjs"
  ]
}

Now, if I try to import my library into the app using the path written above I will get :

is not under 'rootDir' '/Users/{username}/Documents/Repository/{repo}/apps/{project}/app'. 'rootDir' is expected to contain all source files.

and

is not listed within the file list of project '/Users/{username}/Documents/Repository/{repo}/apps/{project}/tsconfig.app.json'. Projects must list all files or use an 'include' pattern.

I would assume create a fresh nx project and 2 fresh library would work out of the box but this doesnt. So I am unsure what is the best way forward ?

Should I manually remove rootDir on library and app after generation ? Should I had references ? What is the suggested way ?