Error when running admin in production

[paulpopus]

Currently pinning the Next version due to the breaking change in the latest version of Next, so I can't say if fixing that other issue will fix this too but when running in production, serverless in Vercel, the admin panel doesn't load due to several errors like this one

/var/task/node_modules/payload/dist/admin/components/forms/Label/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:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/var/task/node_modules/payload/dist/admin/components/forms/Label/index.js:9:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
RequestId: 515966ff-be5b-41bc-8696-66dc7697a0b7 Error: Runtime exited with error: exit status 1
Runtime.ExitError

[jmikrut]

Hey @paulpopus — I just spent a good 4 hours trying to figure out what the hell was going on here and unfortunately I figured it out, although the answer upsets me greatly.

Just add 'use client' to the top of whatever file you are attempting to import the Payload Label from, and voila. Problem goes away. I updated this demo to show an example of this here:

https://github.com/payloadcms/next-payload-demo/blob/main/payload/components/UITest/index.tsx#L1

This is unfortunately something in the NextJS world that we can't do much to help. But happy to have found a workaround 😌

[paulpopus]

@jmikrut So I'm actually getting this error when trying to access the admin panel in production. I'm not importing payload's own components anywhere and the weird part is that locally it works totally fine

This is the page component

'use client'

import React from 'react'
import Root from 'payload/dist/admin/Root'

const PayloadAdmin = () => {
  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])

  if (!mounted) return null

  return <Root />
}

export default PayloadAdmin

I'm on the latest version of nextjs and next-payload package. When I'm accessing the admin panel it's making requests to the API for endpoints .../init and .../me and this is where the 500 server errors occur. I'm hosting with Vercel if it helps, here is the handler (same as generated) for init

import handler from '@payloadcms/next-payload/dist/handlers/[collection]/init'

export default handler

export const config = {
  api: {
    externalResolver: true
  }
}

[jmikrut]

Can you check your Vercel logs? You should be able to find an error that is causing the 500 and we can help with that for sure.

I wonder if Payload is able to connect to your database appropriately. Let me know!

[paulpopus]

Yeah so that's the error that I posted above,for payload version 1.10.2

[GET]

/api/users/me

runtime:

Node.js 18.x

function:

/api/[collection]/me

/var/task/node_modules/payload/dist/admin/components/forms/Label/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:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/var/task/node_modules/payload/dist/admin/components/forms/Label/index.js:9:1)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
RequestId: 202b42be-b373-49eb-aa58-31321814028f Error: Runtime exited with error: exit status 1
Runtime.ExitError

[DennisSnijder]

@jmikrut @paulpopus I'm having the exact same issue when running a yarn build locally, same goes for Vercel, it fails on the build step with this exact exception.

[DennisSnijder]

@jmikrut managed to find what's going on. I'm using the "payload-visual-editor" plugin which includes a custom field. I think that this might be the same problem as the one you mentioned earlier. However, I can't simply add a use client directive since It's inside a package 😢

Edit: Managed to fix it! if you add a third party package to the transpilePackages option, it successfully builds and runs!
for reference: https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages

Perhaps a useful thing to include in the documentation 😄

[jmikrut]

Hey @DennisSnijder you should add that package to transpilePackages in your next.config.js - that will solve the issue 👍

[DennisSnijder]

Hey @DennisSnijder you should add that package to transpilePackages in your next.config.js - that will solve the issue 👍

I just did that! it works 🥳

[silveltman]

Hey @DennisSnijder you should add that package to transpilePackages in your next.config.js - that will solve the issue

This worked for me too. I was using the formbuilder plugin. Would indeed be nice if this was added to the docs.