Broken with Next.js 14

[Eric-Arz]

When using Next.js 14 deployed on Vercel going to any of the admin routes results in this error. Works fine with Next.js 13.5.6

 ⨯ /var/task/node_modules/payload/dist/admin/components/elements/Banner/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at r.<computed>.e._load (/var/task/___vc/__launcher/__launcher.js:14:2516)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at w.require (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:11:25859)
    at require (node:internal/modules/cjs/helpers:119:18)
/var/task/node_modules/payload/dist/admin/components/elements/Banner/index.scss:1
@import '../../../scss/styles.scss';
^

SyntaxError: Invalid or unexpected token
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1178:20)
    at Module._compile (node:internal/modules/cjs/loader:1220:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at r.<computed>.e._load (/var/task/___vc/__launcher/__launcher.js:14:2516)
    at Module.require (node:internal/modules/cjs/loader:1143:19)
    at w.require (/var/task/node_modules/next/dist/compiled/next-server/server.runtime.prod.js:11:25859)
    at require (node:internal/modules/cjs/helpers:119:18)
Error: Runtime exited with error: exit status 1
Runtime.ExitError

[JarrodMFlesch]

Yep this is known, thanks for pulling the issue! Looking to resolve this today and then publish a release with fixes from yesterday as well.

[tgrander]

was there ever a fix released for this issue? i have a next.js 14 app and would love to integrate payload into it.

[bruno3du]

was there ever a fix released for this issue? i have a next.js 14 app and would love to integrate payload into it.

Did you build something with it?

[otomir23]

Are there any updates on when a fix will be implemented?

[vignesh-gupta]

@JarrodMFlesch any updates on this issue?

[JarrodMFlesch]

No fix as of right now, James and I spent a bit of time attempting to work around this. We were unsuccessful and are focusing our efforts on Payload 3.0, which will inherently make things even easier to integrate with Next/Vercel.

Sorry for leaving you all hanging! For now we recommend using Next13 or Next 14.0.0

[indievish]

any eta of when Payload 3.0 beta branch is available?

[DanRibbens]

any eta of when Payload 3.0 beta branch is available?

I'm less involved in this but I know they have been making great progress. The goal is to move swiftly to reduce divergent changes in different branches.

[1forh]

This isn't working for me even with Next.js v13.5.6. Not sure what to do as my project doesn't work when deploying to Vercel.

It works locally if you npm run build and npm start but does not work when deployed to Vercel and attempting to access /admin routes.

[jacobsfletch]

Hey all, this repo will soon be archived because it's been merged into the main Payload repo here: https://github.com/payloadcms/payload/tree/main/packages/next. Payload 3.0 ships with native support for Next.js and is currently out in beta here: https://github.com/payloadcms/payload-3.0-demo. I'm going to close this issue now but feel free to keep the conversation going either as a GitHub Discussion or on Discord. If think issue persists, feel free to open a new ticket on either the demo repo or the monorepo with the 3.x-beta label, and be sure to include a reproduction so we can fix it faster.