Support for Vinext (Vite-native Next.js on Cloudflare Workers) #15876
Replies: 6 comments 4 replies
|
Hi there, thanks for testing as well! We have been to and we're getting to different points and bugs. Right now the plan is to wait for vinext to be a bit more mature while testing newer versions more often. Will likely make a full thread about tracking progress here sometime soon |
|
Everytime my build compiles, taking minutes, I wish payload cms to work with Vinext/Vite |
|
For number 1, I've been working with the Vite RSC plugin maintainers to upstream some fixes for scope handling - can you try with |
|
Hi! How's this going - to get Payload CMS working with Vinext? Is there any support from the community that is needed? |
|
Hi! How's this going - to get Payload CMS working with Vinext? Is there another alternative to payload cms nowadays, where did everybody go? |
|
is Payload CMS working with Vinext now? |
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I a'm trying to run Payload CMS v3.79 on Vinext (Vite-native React Server Components on Cloudflare Workers). The admin panel mostly works, but we hit a few bundler-compatibility issues. These are all fixable with small changes and would improve Payload's compatibility with non-webpack bundlers.
1. 🐛
SyntaxError: Identifier 'cookies' has already been declaredFile:
@payloadcms/next/dist/layouts/Root/index.jsVite's server action transform hoists
'use server'function bodies into the parent scope. This causes a collision between the destructuredcookiesfrominitReq()(line 26) andconst cookies = await nextCookies()insideswitchLanguageServerAction(line 59).Why this happens: Next.js/webpack extracts server actions into separate module-level functions with unique identifiers. Vite's RSC transform instead hoists the function body inline, keeping both
const cookiesdeclarations in the same scope →SyntaxError.Fix: Rename the inner variable to avoid the collision:
async function switchLanguageServerAction(lang) { 'use server'; - const cookies = await nextCookies(); - cookies.set({ + const cookieStore = await nextCookies(); + cookieStore.set({ name: `${config.cookiePrefix || 'payload'}-lng`, path: '/', value: lang }); }This is a one-line change. Happy to submit a PR.
2.⚠️
isPlural is not a function— CJS interopFile:
payload/dist/utilities/formatLabels.jspluralizeis a UMD/CJS module. In non-webpack ESM contexts (Vite SSR, Cloudflare Workers/workerd), the default import may not resolve to the function — it can return an empty object or a module namespace. A defensive pattern would fix this:3. ℹ️ CJS transitive dependencies need pre-bundling
Payload's dependencies (
bson-objectid,ajv,deepmerge,http-status,md5,uuid,path-to-regexp,sanitize-filename, etc.) are CJS modules. When Payload is excluded from Vite'soptimizeDeps(required for RSC), these transitive deps also skip pre-bundling, causingdoes not provide an export named 'default'errors in the browser.Current workaround: Users must manually add all CJS deps to
optimizeDeps.include:Payload could help by either:
optimizeDeps.includelist for Vite users@payloadcms/next4. ℹ️
react/compiler-runtimeCJS export detectionPayload v3.79 is compiled with React Compiler, which requires
react/compiler-runtimeto exportc. The CJS file wrapsexports.cinside a conditional IIFE that Vite's static analysis can't detect as a named ESM export:Workaround: Users create an ESM shim and alias
react/compiler-runtimeto it invite.config.ts. This is a React packaging issue, not strictly Payload's, but worth noting for Vite users.Environment
Steps to Reproduce
@payloadcms/nextnpm run dev/adminExpected Behavior
Admin panel loads without errors.
Actual Behavior
SyntaxError: Identifier 'cookies' has already been declared— blocks admin panel entirelyisPlural is not a function— blocks admin paneldoes not provide an export named 'default'— blocks client-side hydrationAll reactions