Website template clone cache error

I cloned the starter template for the website and i get this error when starting and then it breaks the account page when logged in

Using:

 npx create-payload-app my-project -t website 

Error

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource
<w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource
 ✓ Compiled /(pages)/account/page in 2.3s (776 modules)
 ⨯ src/app/_api/fetchComments.ts (25:28) @ eval
 ⨯ Error: Variable "$user" of type "String" used in position expecting type "JSON".
    at eval (./src/app/_api/fetchComments.ts:22:31)
    at async fetchComments (./src/app/_api/fetchComments.ts:9:18)
    at async Account (account/page.tsx:42:22)
  23 |     ?.then(res => res.json())
  24 |     ?.then(res => {
> 25 |       if (res.errors) throw new Error(res?.errors?.[0]?.message ?? 'Error fetching docs')
     |                            ^
  26 | 
  27 |       return res?.data?.Comments?.docs
  28 |     })

in an attempt to fix I've removed payload cloud as mentioned in the read me as this is running locally on my machine.

Furthermore i removed the fetch comments section all together and started getting hydration errors in the input component :

Did not expect server HTML to contain a <div> in <div>.

I'm also getting these jsx errors (see screeshot)

Am i missing something in part of the setup? seems to be a few things wrong with the template

Further to this I get errors seeding:

[14:37:38] ERROR (payload): Error revalidating page 'post-2' in collection 'posts': [object Response]

And get the same error visiting any of the posts pages

Projects pages work fine

For more reference too, the ecommerce template works fine