Unable to render a block?

[mellow wing]

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.

[echo idol]

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

[mellow wing]

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 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>
    );
  };```

[mellow wing]

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>
  );
};

[small oasis]

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

[mellow wing]

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 -

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?

[small oasis]

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

[mellow wing]

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 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?

[small oasis]

dont destructure props

[mellow wing]

Oops. Console isn't returning any log?

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.