Comments (7)
Just following up here. It looks like the latest Next.js version is not compatible with how we are doing this, so we will need to revise and come up with a game plan to get this working again. For now, you can pin next
to a known working version of ^13.2.4-canary.6
.
from next-payload.
@Eric-Arz this has been resolved in the latest update. The fix was this single line, thanks to @jmikrut for saving the day.
from next-payload.
@Eric-Arz I am unable to replicate with 0.0.26. If you can recreate and provide more details that would be great! Here is the repo I used to test for reference: https://github.com/payloadcms/next-payload-demo
from next-payload.
im having the same problem, it gets stuck in an endless loop where it just restarts the same failing process.
the payloadClient.ts file its referencing is unchanged. at first when the site launches after running "npm run dev" it works, but if you reload it collapses:
- error OverwriteModelError: Cannot overwrite
_preferences
model once compiled.
at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at eval (./payload/payloadClient.ts:6:78)
at Module.(sc_server)/./payload/payloadClient.ts (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\app[slug]\page.js:6751:13)
at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at eval (./app/[slug]/page.tsx:8:80)
at Module.(sc_server)/./app/[slug]/page.tsx (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\app[slug]\page.js:1280:13)
at Function.webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52)
at async Promise.all (index 0)
at async Promise.all (index 0)
digest: "316675077" - error OverwriteModelError: Cannot overwrite
_preferences
model once compiled.
at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at eval (./payload/payloadClient.ts:6:78)
at Module.(sc_server)/./payload/payloadClient.ts (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\app[slug]\page.js:6751:13)
at webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52) at eval (./app/[slug]/page.tsx:8:80)
at Module.(sc_server)/./app/[slug]/page.tsx (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\app[slug]\page.js:1280:13)
at Function.webpack_require (C:\Users\admin\Desktop\projects\payload-with-next\my-app.next\server\webpack-runtime.js:30:52)
at async Promise.all (index 0)
at async Promise.all (index 0)
from next-payload.
@olarsson can you recreate this with freshly installed next-payload-demo app by chance?
from next-payload.
@JarrodMFlesch I had been exploring this issue, but FYI, even with ^13.2.4-canary.6
hot module reloading encounters the same error in both my pnpm + Turborepo project and also the next-payload-demo
repo.
The global scope just doesn't seem to be persisted, as I logged the calls with the code below and there were many instances of --- NEW PAYLOAD ---
across Next.js requests.
Note: the code below inits the Payload client with proper type inference.
import { getPayload } from 'payload/dist/payload'
import config from './payload.config'
if (!process.env.MONGODB_URI) {
throw new Error('MONGODB_URI environment variable is missing')
}
if (!process.env.PAYLOAD_SECRET) {
throw new Error('PAYLOAD_SECRET environment variable is missing')
}
type PayloadPromise = ReturnType<typeof getPayload>
type Payload = Awaited<PayloadPromise>
/**
* Global is used here to maintain a cached connection across hot reloads
* in development. This prevents connections growing exponentially
* during API Route usage.
*
* Source: https://github.com/vercel/next.js/blob/canary/examples/with-mongodb-mongoose/lib/dbConnect.js
*/
let globalWithPayload = global as typeof globalThis & {
payload: {
client: Payload | undefined
promise?: PayloadPromise | undefined
}
}
let cached = globalWithPayload.payload
if (!cached) {
cached = globalWithPayload.payload = { client: undefined, promise: undefined }
}
export const getPayloadClient = async () => {
if (cached.client) {
console.info(`--- USING CACHED CLIENT ---`)
return cached.client
}
if (!cached.promise) {
console.info(`--- NEW PAYLOAD ---`)
cached.promise = getPayload({
// Make sure that your environment variables are filled out accordingly
mongoURL: process.env.MONGODB_URI as string,
secret: process.env.PAYLOAD_SECRET as string,
config
})
}
try {
console.info(`--- AWAITING NEW PAYLOAD INIT ---`)
cached.client = await cached.promise
} catch (err) {
console.error(`--- ERROR ---`, err)
cached.promise = undefined
throw err
}
return cached.client
};
export default getPayloadClient
from next-payload.
With the following versions:
- @payloadcms/[email protected]
- [email protected]
- [email protected]
It seems wrapping the getPayloadClient
inside my page.tsx
with the react cache like so works for me so far:
const getPayload = await cache(() => getPayloadClient())
const payload = await getPayload()
I decided to try this following the example as documented here in the NextJS documentation.
This could also be worked into the payloadClient.ts
file, of course.
Never mind, that stopped working as soon as I tried accessing the admin pages.
from next-payload.
Related Issues (20)
- Broken with Next.js 14 HOT 10
- Local File Upload Path Mismatch? HOT 4
- Warning: ToastContainer HOT 2
- getPayload is not a function / req.payload is a Promise? HOT 3
- Payload CMS overrides styled-component GlobalStyles HOT 1
- App crashes with postgresql HOT 2
- Unable to set up with postgres on 13.5.6 (works with mongodb) HOT 1
- Cannot find module '../payload/payload.config.ts'
- API Key: You are not allowed to perform this action. HOT 1
- `Error [ERR_REQUIRE_ESM]: require() of ES Module` error when using component in /pages instead of /app folder HOT 4
- Custom views don't work HOT 2
- `getPayloadClient()` fails in server actions HOT 2
- Builds dont work with next14 HOT 6
- Status 500 error with vercel deploy (next14) HOT 2
- Unexpected handler pages/api/[collection]/lib/worker.js HOT 1
- Can't login '/admin' after creating initial admin account on '/admin' page (Next.JS 14 with next-payload) HOT 4
- Incompatability with lexical editor HOT 1
- Unexpected handler pages/api/[collection]/lib/worker.js in next-payload HOT 5
- `loadConfig is not a function` when running `next-payload build` HOT 2
- Full restart required for changes to apply correctly HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-payload.