-
I'm trying out payload I ran into a problem with generated types for blocks that makes next js linting step fail. import type { Block } from "payload";
import { lexicalEditor } from "@payloadcms/richtext-lexical";
export const SimpleBlock: Block = {
slug: "simpleblock",
interfaceName: "Simple Block",
labels: {
singular: "Simple Block",
plural: "Simple Blocks",
},
fields: [
{
name: "richtextfield",
type: "richText",
required: true,
editor: lexicalEditor({}),
},
],
}; And it's rendered basically in the same way it's done in payload website template: import { Fragment } from "react";
import { type Page } from "@/payload-types";
import { SimpleBlock } from "@/blocks/SimpleBlock/SimpleBlockComponent";
interface Props {
blocks: Page["layout"][0][];
}
const blockComponents = {
simpleblock: SimpleBlock,
};
export const RenderBlocks: React.FC<Props> = (props) => {
const { blocks } = props;
const hasBlocks = blocks && Array.isArray(blocks) && blocks.length > 0;
if (!hasBlocks) return;
return (
<Fragment>
<div>
{blocks.map((block) => {
if (!block.blockType || !(block.blockType in blockComponents)) return;
const BlockComponent = blockComponents[block.blockType];
return <BlockComponent {...block} key={block.id} />;
})}
</div>
</Fragment>
);
}; But for some reason I'm getting this error:
I could turn off linting since everything works fine, but I would rather find out what's causing this issue. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
After banging my head at this problem for a whole day, I decided to make this post. 10 minutes later I realized I have a space in block |
Beta Was this translation helpful? Give feedback.
After banging my head at this problem for a whole day, I decided to make this post. 10 minutes later I realized I have a space in block
interfaceName
.