Unable to render a block?

Taun

7 months ago

15

• 

  thisisnotchris

  7 months ago

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

• 

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

  

  
• 

  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

• 

  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?

• 

  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

• 

  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?

• 

  Jarrod

  7 months ago

  dont destructure props

• 

  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.

• 

  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