How to properly apply patches to Keystone 6?

[Meetcpatel]

How to properly apply patches to Keystone 6 auth package's login page?

Issue Description

I'm trying to customize the Keystone 6 auth package's login page by applying a patch, but the changes aren't reflecting in the UI after applying the patch.

What I've Done

1. Made changes to the sign-in page text in node_modules/@keystone-6/auth/src/pages/SigninPage.tsx:

// From

<H1>Sign In</H1>

// To

<H1>Sign In - Patch Applied</H1>

2. Generated the patch using:

npx patch-package @keystone-6/auth

3. The patch file @keystone-6+auth+7.0.3.patch was generated successfully with the following content:

diff --git a/node_modules/@keystone-6/auth/src/pages/SigninPage.tsx b/node_modules/@keystone-6/auth/src/pages/SigninPage.tsx
index d0b5b75..a886d20 100644
--- a/node_modules/@keystone-6/auth/src/pages/SigninPage.tsx
+++ b/node_modules/@keystone-6/auth/src/pages/SigninPage.tsx
@@ -107,7 +107,7 @@ export function SigninPage ({
   return (
     <SigninContainer title="Keystone - Sign in">
       <Stack gap="xlarge" as="form" onSubmit={onSubmit}>
-        <H1>Sign In</H1>
+        <H1>Sign In - Patch Applied</H1>
         {error && (
           <Notice title="Error" tone="negative">
             {error.message}

4. Added postinstall script to package.json:

"postinstall": "patch-package && keystone build --no-ui --frozen"

5. Ran yarn which executed the patch successfully.

Current Behavior

The changes are not visible on the sign-in page after applying the patch.

Expected Behavior

The sign-in page should display "Sign In - Patch Applied" instead of "Sign In".

Questions

1. Is there a specific rebuild process needed for the @keystone-6/auth package after applying the patch?
2. Are there additional steps required to make the patches take effect in the UI?
3. Should I be clearing any cache or running additional commands?

Environment

• Node.js version: v18.20.4
• Operating System: MacOS 14.5

Any guidance on the correct process to apply patches to Keystone 6 packages would be greatly appreciated.

[marekryb]

When you are importing @keystone-6/auth you are actually importing from @keystone-6/auth/dist - javascript files being output of transpilation from typescript. So changing source files will change nothing (unless you import from /src/ directly, but I doubt it will work).

To use patch-package you would need to:

1. clone keystone repo to your machine
2. make your change
3. build it (pnpm build)
4. copy relevant (.cjs.dev.js / .cjs.prod.js / .esm.js) files to your node_modules and then run patch-package.
   (For SigninPage the relevant dir is @keystone-6/auth/pages/SigninPage/dist/)

[Meetcpatel]

Thanks @marekryb ! it worked! 🙏😊