"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
Errors when trying to add custom elements to richText
Hi - I've copied verbatim your richText example from the
website-cmsrepo (which has the
richText
deepMergefield return function). I've left the video, largeBody and label as is. I've installed the necessary dependancies.
When I try to run my dev server. I see the error (in the attached image).
As a sanity check, I've commented out any reference to payload scss files and the use of mixins/extends etc.
Any idea how to fix this?
Obviously the dev server doesn't start until I remove the use of
richText()in the blocks where it's called (and remove any reference to the imported file; barrel,
import {}etc).
Interesting, what version of Next.js are you on?
13.1.1From reading through Next.js 13 release notes, it looks like importing css from node_modules is only supported if also using the
appdirectory. Are you using that?
https://github.com/vercel/next.js/discussions/27953#discussioncomment-3978605No, I'm still using the older pages directory
That's likely the issue
I'm not importing any scss... bit confused here.
import { ElementButton } from 'payload/components/rich-text';Is the problem that this is importing scss?
/// <reference types="react" /> import '../buttons.scss'; declare const LeafButton: ({ format, children }: { format: any; children: any; }) => JSX.Element; export default LeafButton;and
import React from 'react'; import { ButtonProps } from './types'; import '../buttons.scss'; export declare const baseClass = "rich-text__button"; declare const ElementButton: React.FC<ButtonProps>; export default ElementButton;How would you suggest a solution to this?
If I understand correctly:
You have Payload and Next.js running as one project (correct?)
Because of this, Next.js is attempting to run Payload's style files through it, which isn't supported before Next.js 13 w/ app directory.
https://github.com/vercel/next.js/issues/19936Let me know if I'm off here
I am running a monorepo yes. How did you customise slate prior to next 13?
These style referrences are within the field/blocks/collections - so I'm not using them within next itsefl
Okay, so Payload and Next
aren'ton the same express server, correct?
well, should read: these imports from payload that reference scss
no, they are. I'm running the
# Payload + NextJS Server-Rendered TypeScript Boilerplaterepo from yourselves
Well, that repo does just that - runs payload and next on one express server.
https://github.com/payloadcms/nextjs-custom-server/blob/master/server/index.tsHere is how we customized slate in previous versions:
https://github.com/payloadcms/public-demo/blob/master/src/fields/richText
@281120856527077378or
@808734492645785600. Did you run into anything like this when developing our site?
yes I know it runs as one express server... didn't suggest otherwise. Anyway... that's not the important issue. Thanks will take a look.
I flipped "no, they are" in my mind. My bad.
Let us know if you run into anything else 👍
that looks the same... still references
import { ElementButton } from 'payload/components/rich-text';which is where the scss error is coming from according to my console error.
To be clear. I'm not importing any scss from node_modules anywhere in my app. The ONLY references are within these field folders
@357456032454410240can you take a read through this convo I had, it seems very similar:
https://discord.com/channels/967097582721572934/1065905578863513710/1066037840787550218Thanks
@281120856527077378- That does seem like it's the same issue. I have a barrel for the renderblocks component. How best to separate 🤔
Didn't need to separate, but did need to keep the richText field and field types out of the same barrel, so next didn't evaluate it.
I can see the largeBody and useLabel elements working in the richText editor now. However, I would love for the video to work too.
When that's enabled, the admin ui crashes
oh really? What is the error?
useContext within the video component it seems??
Full error if it helps
Is there some extra setup required for the video in slate? I've installed
slate-reactand
@faceless-ui/modal. Anything obvious I might be missing?
Error seems to come from the useModal hook. Moving the debugger below this, and the admin ui crashes.
actually, removing the useModal and trying again, it fails if put below useSlate()
🤷♂️
I've exhausted ideas for this. Any inspiration
@281120856527077378?
Ok, so that to me means this component is being rendered outside of the modal provider. Where are you rendering this button?
I'm using it in the same place from your example (I've copied the exact setup from
website-cms) nothing changed. Do I need to do something else to make this work then?
it's used in the richText component as an element
wait if you remove all the code related to modal in this file, it gives you a different error?
oh wait
you should not need to install slate-react or @faceless-ui/modal
ok - ill try removing and try again
removing all the modal code (answering your first question) just shows the video icon in the toolbar.
no errors
If i don't have slate installed, then it fails to start with this error
is why i installed to begin with I remember
then with slate-react installed, I get this:
with
@faceless-ui/modalI get these warnings:
looking into node_modules and the version in payload's package.json, the version of slate-react is quite different. I've installed locally the same version
0.72.1and that last error has gone
and now the browser console error is different too
This is certainly odd, did you wipe node_modules/lock file and reinstall already?
I just booted our cms on the same payload version 1.5.9, but I am unable to recreate this issue 🤔 hmmmmmm
Very odd. I've wiped node modules and now the browser has yet more different errors.
I think i'll give up on this.
I'll implement the video is a simple layout block instead
I'll leave the code in my repo... should you think of solution please do ping me. Interested to get to the bottom of it.
really wish I'd have kept payload and next separate repos. the deeper I get into this project, the more fragile the relationship between the two becomes.
is it a private repo?
it is - I can give you access if you would like to delve deeper?
My interest has piqued
@Jarrodmfleschon gh
cool - I'll send you an invite later... currently doing the separating of blocks (now that I'm using other elements/leaves in layout blocks, the issue you shared earlier has raised its ugly head).
no rush, i'll check it out when I have time 👍
I'm a little confused by this because without these I'm unable to do useSlate(), and in the tutorial Jake was following this is something that gets used in order to find the current Editor object in the Button element
But I guess we could get it using
import { useSlate } from 'payload/node_modules/slate-react'But this isn't what is used in the tutorial.
Using this import doesn't throw any error
@357456032454410240Thanks for the tip
@191776538205618177I’ll try this and report back.
Star
Discord
online
Get dedicated engineering support directly from the Payload team.