OverwriteModelError on reload / hot reload

[Alex979]

I currently have a site where I statically generate my pages using the Local API with getPayloadClient, but whenever my dev environment hot reloads or I manually reload the page, I get the following error:

- error OverwriteModelError: Cannot overwrite `_preferences` model once compiled.
    at __webpack_require__ (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\webpack-runtime.js:30:52)
    at __webpack_require__ (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\webpack-runtime.js:30:52)
    at eval (./payload/payloadClient.ts:6:78)
    at (sc_server)/./payload/payloadClient.ts (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\app\gallery\[slug]\page.js:7156:13)
    at __webpack_require__ (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\webpack-runtime.js:30:52)
    at eval (./lib/locations.ts:9:80)
    at (sc_server)/./lib/locations.ts (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\app\gallery\[slug]\page.js:1495:13)
    at __webpack_require__ (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\webpack-runtime.js:30:52)
    at eval (./app/gallery/[slug]/page.tsx:11:72)
    at (sc_server)/./app/gallery/[slug]/page.tsx (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\app\gallery\[slug]\page.js:1451:13)
    at Function.__webpack_require__ (C:\Users\alexb\Documents\projects\next.js\krunal-desai\.next\server\webpack-runtime.js:30:52)
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)

This seems to be an error coming from mongoose related to the schema, but my understanding was that using getPayloadClient() was supposed to cache the connection so I'm not sure why this happens on reload.

It's tough to reproduce since you need a mongoose database and an s3 bucket configuration for the site to work properly, but I'll link my repository here if you'd like to take a look: https://github.com/Alex979/Krunal-Desai/tree/new-stack

These are the steps to reproduce:

1. Set up the following environmental variables in a .env file with a valid mongodb database and amazon s3 bucket

   MONGODB_URI=mongodb://your-mongodb-uri
   PAYLOAD_SECRET=SOME_SECRET
   PAYLOAD_CONFIG_PATH=payload/payload.config.ts
   S3_ACCESS_KEY_ID=YOUR_S3_ACCESS_KEY_ID
   S3_SECRET_ACCESS_KEY=YOUR_S3_SECRET_ACCESS_KEY
   S3_REGION=region (like us-east-1)
   S3_BUCKET=bucket-name

2. Run the application with npm run dev
3. In the Admin panel, create a new Location using the Admin UI
4. Go to http://localhost/gallery/{slug} <-- the slug is the URL safe version of the location you created, ex: "United States" becomes "united-states"
5. The page should compile successfully on the first load, but if you hot reload or manually reload the page at this point, you will see the above error

Any help would be much appreciated! I haven't seen anyone else reporting this error so I'm hoping that I'm just overlooking something here.

[Alex979]

Also just for added context, the functions where I am using the local API are in lib/locations.ts, and I call these functions in my pages, such as in app/gallery/[slug]/page.tsx.

[Alex979]

Update: Going to close this since I was able to fix the issue by upgrading to the latest version of Next.JS.