Unable to render a block?

default discord avatar
Taun
7 months ago
15

Hi guys. I don't understand why the Room block component isn't rendering?



It's probably simpler to view the repo.



As far as I know, I've done these steps (probably incorrectly at some point). I've gone over it and I can't pin point the issue.



https://github.com/taunhealy/Bukela-Lodge

Define the block configuration: Define a block configuration object using the Block type from the payload/types module. This object defines the fields that are available for the block and how they should be rendered in the admin UI.



Define the block component: Create a React component that will render the block on the frontend of the website. This component should receive the values of the fields defined in the block configuration as props.



Add the block to the collections and components objects: Add the block configuration and component to the collections and components objects respectively. This will allow the block to be selected and rendered in the Payload admin UI.



Define the block in the layout array: Add the block to the layout array in the Page collection configuration. This will determine the order in which the blocks are rendered on the page.



Create a React component to render the blocks: Create a React component that will receive the layout array as a prop and map over it to render each block using the corresponding block component.



Render the RenderBlocks component: In the page component (...slug.ts), render the RenderBlocks component passing the layout array as a prop. This will render all the blocks in the layout array in the order they were defined.

  • default discord avatar
    thisisnotchris
    7 months ago

    Morning @Taun ! Are you get receiving any specific error messages?

  • default discord avatar
    Taun
    7 months ago

    Good afternoon Chris! No errors. It's rendering the page like so, but it's not rendering the block. I'd like to replace the title and featured image with the Room block.



    This Rooms block Component.tsx has squigglies all over it. Is it the wrong syntax?



    import React from 'react';
    import NextImage from 'next/image';
    import RichText from '../../components/RichText';
    import classes from './index.module.css';
    import sizes from './sizes.json';
    import { MediaType } from '../../collections/Media';
    import { Rooms } from './Config';
    
    export type Type = {
      blockType: 'rooms'
      blockName?: string
      selectRooms: any[];
        };
    
      export const Component: React.FC<Type> = ({ selectRooms }) => { 
        return ( 
        <div>
          {selectRooms.map((room) => (
            <div key={room._id}>
            <h2>{room.title}</h2>
            <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
            <p>{room.description}</p>
            <p>Price: {room.price}</p>
            </div>
            ))}
        </div>
        );
      };


    How do I know if it's passing the selectRooms prop correctly from Rooms config?


    import React from 'react';
    import NextImage from 'next/image';
    import RichText from '../../components/RichText';
    import classes from './index.module.css';
    import sizes from './sizes.json';
    import { MediaType } from '../../collections/Media';
    import { Rooms } from './Config';
    
    export type Type = {
      blockType: 'rooms';
      blockName?: string;
      selectRooms: any[];
    };
    
    export const Component: React.FC<Type> = ({ selectRooms }) => {
      return (
        <div>
          {selectRooms.map((room) => (
            <div key={room._id}>
              <h2>{room.title}</h2>
              <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
              <p>{room.description}</p>
              <p>Price: {room.price}</p>
            </div>
          ))}
        </div>
      );
    };
    image.png
    image.png
  • default discord avatar
    Jarrod
    7 months ago

    you can debug by changing


    export const Component: React.FC<Type> = ({ selectRooms })

    to


    export const Component: React.FC<Type> = (props)


    and then console log props in that component

  • default discord avatar
    Taun
    7 months ago

    Thanks Jarrod. I'm trying to give that a go but my server continuously fails. I'm using Nextjs custom-server template. It loads up fine, but if I run yarn dev again to refresh it returns either an EPERM error or seems to hang on startup -


    [18:46:52] INFO (payload): Starting Payload...
    info  - Loaded env from C:\git\2160\Bukela-Lodge\.env
    webpack built dd293cae548a5a263c22 in 15651ms
    webpack compiled successfully
    <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: No serializer registered for ConcatSource     
    <w> while serializing webpack/lib/util/registerExternalSerializer.webpack-sources/ConcatSource -> Array { 2 items } -> ConcatSource


    When I go to the browser it can't fetch any data and returns error 'missing required error components, refreshing...' Internal server error 500, sometimes 400.



    This has been happening consistantly across different repos. I reinstalled Node and updated Nextjs to 13.3. Not sure what it could be. Any ideas?

  • default discord avatar
    Jarrod
    7 months ago

    first I would delete your webpack cache folder folder from your node modules folder. Then I would work backwards, commenting out as much code as you can until it starts working, then go forwards from there

  • default discord avatar
    Taun
    7 months ago

    Thanks Jarrod. It's back up for now. It seems like I have to restart VsCode for it work. Maybe something with cache. I deleted that folder but it didn't fix it, not permanently at least.



    I changed the props to { props }



     import React from 'react';
    import NextImage from 'next/image';
    import RichText from '../../components/RichText';
    import classes from './index.module.css';
    import sizes from './sizes.json';
    import { MediaType } from '../../collections/Media';
    import { Rooms } from './Config';
    
    export type Type = {
      blockType: 'rooms';
      blockName?: string;
      selectRooms: any[];
    };
    
    export const Component: React.FC<Type> = ({ props }) => {
      console.log(props);
      
      return (
        <div>
          {selectRooms.map((room) => (
            <div key={room._id}>
              <h2>{room.title}</h2>
              <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
              <p>{room.description}</p>
              <p>Price: {room.price}</p>
            </div>
          ))}
        </div>
      );
    };


    I'm not getting any message back in the console?

  • default discord avatar
    Jarrod
    7 months ago

    dont destructure props

  • default discord avatar
    Taun
    7 months ago

    Oops. Console isn't returning any log?



     import React from 'react';
    import NextImage from 'next/image';
    import RichText from '../../components/RichText';
    import classes from './index.module.css';
    import sizes from './sizes.json';
    import { MediaType } from '../../collections/Media';
    import { Rooms } from './Config';
    
    export type Type = {
      blockType: 'rooms';
      blockName?: string;
      selectRooms: any[];
    };
    
    export const Component: React.FC<Type> = ( props ) => {
      console.log(props);
      
      return (
        <div>
          {selectRooms.map((room) => (
            <div key={room._id}>
              <h2>{room.title}</h2>
              <img src={room.featuredImage.url} alt={room.featuredImage.alt} />
              <p>{room.description}</p>
              <p>Price: {room.price}</p>
            </div>
          ))}
        </div>
      );
    };


    So in this case we're calling all props to be shown in the console, and because there's nothing returned does that mean it's not finding any props, or could it be a different problem?



    After refreshing the page the console retuned this error:

     Unchecked runtime.lastError: The message port closed before a response was received.


    I think it returned that because the server was refreshing my change of removing the spaces between (props). I refreshed the page a few seconds later and that error message went away and the console still isn't returning any props.

  • default discord avatar
    Jarrod
    7 months ago

    The yeah this block is not being rendered. So I would log props a level up, in your render blocks component

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.