How to build a single package (like @payloadcms/ui) from the sources?

[borisiua]

hello. thank you for the amazing project.

in general, i want to make few customizations to the @payloadcms/ui package (like optionally disabling drag functionality on TextField when the hasMany:true is set, so it will not a little glitch on mobile devices when we scroll over the text inputs). to achieve this, first i want to PoC the just building from the sources as they are.

i have downloaded this repo with the following commands:

git clone https://github.com/payloadcms/payload.git --no-checkout --depth 1 -b v3.2.2
cd payload/
git sparse-checkout init --cone
git sparse-checkout set packages/ui packages/payload packages/translations
git checkout

i am aiming to use my local copy of @payloadcms/ui instead of the one provided in the npm registry.

the only things i have changed to make the build possible - i have stated the concrete versions like ^3.2.2 and ^3.0.0 (for @payloadcms/eslint-config and @payloadcms/eslint-plugins since their latest version is 3.0.0) instead of using workspace:* versions in package.json files.

i have successfully run pnpm install from the downloaded repo. and once i tried to build it, i also found that because of the tsconfig.json references containing paths to ../payload and ../translations i also needed to set git sparse-checkout set packages/ui packages/payload packages/translations. i did checkout again, again edited all the package.json to not have workspace:*, again successfully run pnpm install from the repo root.

now i had 2 options of building:
a) building from the repo root with pnpm run build:all (including pnpm run build:ui)
b) building from the packages/ui directory with pnpm run build.

i tried independently both approaches, both of them run alright without errors. then i went to my own project, cleaned all the node_modules, cache, and set in its package.json pnpm overrides @payloadcms/ui to be file:path-to-the-cloned-repo/payload/packages/ui. then (for both build approaches) i run in my project rm -rf .next && rm -rf node_modules/.cache && pnpm run generate:importmap && pnpm run generate:types && pnpm run devsafe and got the following error:

node:internal/process/promises:391                                                                      
    triggerUncaughtException(err, true /* fromPromise */);                                              
    ^                                                                                                   
Error [ERR_MODULE_NOT_FOUND]: Cannot find module

if i change the path from file:path-to-the-cloned-repo/payload/packages/ui to file:path-to-the-cloned-repo/payload/packages/ui/dist (also i did try to add my custom built packages/payload and packages/translations similar way, but it had no effect to the next errors i am going to describe) this error is gone, but anyway, when i run pnpm run devsafe and navigate to a web page of my project, i get the following error:

 ✓ Ready in 1841ms
 ○ Compiling /db/[[...segments]] ...
 ⨯ ./src/graphics/Account.tsx:12:1
Module not found: Can't resolve '@payloadcms/ui'
  10 |   SanitizedConfig,
  11 | } from 'payload'
> 12 | import { Logout, useAuth } from '@payloadcms/ui'
     | ^
  13 | import { usePathname } from 'next/navigation'
  14 |

https://nextjs.org/docs/messages/module-not-found
 ⨯ ./src/graphics/Account.tsx:12:1

(the ./src/graphics/Account.tsx is my small custom component i insert to SanitizedConfig['admin']['components']['actions'][0] to show currently logged in account name. it worked without any problems with the @payloadcms/ui from the npm registry)

so what is the right approach to build this repo, but also i don't want to build the entire huge monorepo, i only want to build its packages/ui package the way it is building by the original devs who upload it to the npm registry https://www.npmjs.com/package/@payloadcms/ui ?

i tried to search through contribution guide, issues, discussions, git actions, but unfortunately haven't found answers.

[borisiua]

to be more clear, for my project package.json i tried those configurations:

  "pnpm": {
    "overrides": {
      ...
      "@payloadcms/ui": "file:package-overrides/payload/packages/ui"
    }
  },

  "dependencies": {
      "@payloadcms/ui": "file:package-overrides/payload/packages/ui"
  },

  "dependencies": {
      "@payloadcms/ui": "file:package-overrides/payload/packages/ui",
      "@payloadcms/ui": "file:package-overrides/payload/packages/payload",
      "@payloadcms/ui": "file:package-overrides/payload/packages/translations"
  },

none of them worked out

also i tried approaches of building with workspace:* substitution to concrete versions and without such substitutions. it builds flawlessly (when we build the entire repo), but then errors on either pnpm install for my project (when we didn't the workspace:* substitutions) or on pnpm run dev.

could anyone please show the process how to clone, build and install the built @payloadcms/ui package (or any other payloadcms package generally)?