Как включить компонент карусели в Gatsby с помощью Contentful?

Ошибка, которую вы видите, связана с компонентом большого пальца react-responsive-carousel. Хотя компонент может обслуживать любой контент в дочерних элементах div, для работы миниатюр требуется тег img. Так как с гэтсби приходится работать с компонентом <Img>, это можно исправить, отключив миниатюры

<Carousel showThumbs = {false} />

Ниже приведен полный рабочий пример (используется Typescript):

import * as React from "react";
import Img from "gatsby-image";
import { graphql, StaticQuery } from "gatsby";

import "react-responsive-carousel/lib/styles/carousel.min.css";
import { Carousel } from "react-responsive-carousel";


interface childImageSharpNode {
  childImageSharp: {
    fluid: any;
  };
}
interface SlideShowComponentProps {
  nodes: childImageSharpNode[];
}

class SlideShowComponent extends React.Component<SlideShowComponentProps> {
  constructor(props: SlideShowComponentProps) {
    super(props);
  }

  render() {
    const images: any[] = [];
    for (const node of this.props.nodes) {
      images.push(
        <div>
          <Img fluid = {node.childImageSharp.fluid} alt = "Image"></Img>
        </div>,
      );
    }

    return (
      <Carousel showThumbs = {false} infiniteLoop = {true} autoPlay = {true}>
        {images}
      </Carousel>
    );
  }
}

interface StaticQueryProps {
  allFile: {
    nodes: childImageSharpNode[];
  };
}

const SlideShow: React.FC = () => (
  <StaticQuery
    query = {graphql`
      query slideshow {
        allFile(filter: { relativePath: { regex: "/slideshow/" } }) {
          nodes {
            childImageSharp {
              fluid(maxWidth: 1024) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    `}
    render = {(data: StaticQueryProps) => <SlideShowComponent nodes = {data.allFile.nodes}></SlideShowComponent>}
  />
);

export default SlideShow;