Unknown block type "undefined", specify a component for it in the components.types prop

[damian-guh]

Im getting error Unknown block type "undefined", specify a component for it in the `components.types` prop when im trying to display data from sanity in <PortableText/>

Data from sanity:

{
  "ms": 16,
  "query": "*[_type==\"eucharistDates\"]{dates}",
  "result": [
    {
      "dates": [
        {
          "_key": "05aa4a7799a3",
          "_type": "block",
          "children": [
            {
              "_key": "2173ec501f7b",
              "_type": "span",
              "marks": [
                
              ],
              "text": "Sobota 9:00 10:00"
            }
          ],
          "markDefs": [
            
          ],
          "style": "normal"
        },
        {
          "_key": "ddf850d31eb2",
          "_type": "block",
          "children": [
            {
              "_key": "0fa21a90dcbc",
              "_type": "span",
              "marks": [
                
              ],
              "text": "Niedziela 8:00 10:00 13:00"
            }
          ],
          "markDefs": [
            
          ],
          "style": "normal"
        }
      ]
    }
  ]
}

Next.js code:

import Image from 'next/image';
import PropTypes from 'prop-types';
import { PortableText } from '@portabletext/react';
import heroImage from '../../../../public/hero.jpg';

const components = {
  block: {
    normal: ({ children }) => <span>{children}</span>,
  },
};

const Hero = ({ eucharistDates }) => {
  return (
    <div className="h-[calc(100vh_-_5rem)] w-screen relative bg-black">
      <section className="absolute left-1/2 top-1/2 z-10 flex flex-col text-white text-center transform -translate-x-1/2 -translate-y-1/2">
        <h1 className="uppercase text-4xl">
          Parafia św. Bartłomieja w Opocznie
        </h1>
        <PortableText value={eucharistDates} components={components} />
      </section>
      <Image
        src={heroImage}
        layout="fill"
        objectFit="cover"
        placeholder="blur"
        draggable={false}
      />
    </div>
  );
};

[swalker326]

What does your schema look like in sanity?

[swalker326]

If you checkout this issue I put an example of typescript usage there. You're not using typescript but it looks to me like your components object is structured wrong. You can also check these docs, I understand they're frustrating at times.

[damian-guh]

What does your schema look like in sanity?

export default {
  name: 'eucharistDates',
  title: 'Msze Święte',
  type: 'document',
  fields: [
    {
      name: 'dates',
      title: 'Dni i godziny mszy świętych',
      description: 'np. Sobota: 8:00 9:00 Niedziela 7:00 9:00 10:00',
      type: 'array',
      of: [{ type: 'block' }],
    },
  ],
};

[swalker326]

I got a working sandbox as an example for you. It looks like you're passing in the incorrect data to the PortableText component.

Sanbox

[damian-guh]

I got a working sandbox as an example for you. It looks like you're passing in the incorrect data to the PortableText component.

Sanbox

You're right. I passed result array not blocks array.