So, I'm getting an error from VS Code:

This comparison appears to be unintentional because the types '"CredentialSignin" | undefined' and '"CredentialsSignin"' have no overlap. ts(2367)

the code is this one:

const [code, action] = useFormState(authenticate, undefined);
const { pending } = useFormStatus();

// ...
<div>
{code === 'CredentialsSignin' && (
  <>
    <p aria-live="polite" className="text-md text-red-500">
      Invalid credentials
    </p>
  </>
)}
</div>

I'm trying to create a form to login using next-auth in next.js 14 . I followed the brand new guide they made on Next.JS Learn but I can't resolve this issue.

By the way, also another error comes up when I open the page:

Module not found: Can't resolve 'fs'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^\.\/.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./auth.config.ts
./src/lib/auth.ts
./src/lib/actions.ts
./src/pages/login.tsx

its because the auth.config.ts uses bycript for some stuff, then its required by auth.ts > actions.ts > pages/login.tsx. Its almost the same code as on next.js learn, but if you need me to send other code about this error I can.

I'm using Pages Router, with typescript and src folder.