Comments (9)
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 π
from next-payload.
@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
}
}
from next-payload.
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!
from next-payload.
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
from next-payload.
@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.
from next-payload.
@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 π
from next-payload.
Hey @DennisSnijder you should add that package to transpilePackages in your next.config.js - that will solve the issue π
from next-payload.
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 π₯³
from next-payload.
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.
from next-payload.
Related Issues (20)
- 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
- Unexpected handler pages/api/[collection]/lib/worker.js in next-payload HOT 5
- 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
- `loadConfig is not a function` when running `next-payload build` HOT 2
- Full restart required for changes to apply correctly HOT 2
- 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'
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.