Unable to use carousel in Hydrogen ssr component

Question

I'm having an almost impossible time trying to create a carousel for the Hydrogen Shopify demo store. I've tried several libraries and even tried to create my own carousel but I'm not abel to get it to work without similar errors. I believe it has to do with how the page is being rendered but I don't know of a workaround

import {Suspense, useMemo} from 'react';
import {gql, useShopQuery, useLocalization} from '@shopify/hydrogen';
import {PRODUCT_CARD_FRAGMENT} from '~/lib/fragments';
import {ProductCard, Section} from '~/components';
import Slider from 'react-slick';

const mockProducts = new Array(12).fill('');

export function ProductSwimlane({
  title,
  data = mockProducts,
  count = 12,
  color,
  ...props
}) {
  const productCardsMarkup = useMemo(() => {
    // If the data is already provided, there's no need to query it, so we'll just return the data
    if (typeof data === 'object') {
      return <ProductCards color={color} products={data} />;
    }

    // If the data provided is a productId, we will query the productRecommendations API.
    // To make sure we have enough products for the swimlane, we'll combine the results with our top selling products.
    if (typeof data === 'string') {
      return (
        <Suspense>
          <RecommendedProducts color={color} productId={data} count={count} />
        </Suspense>
      );
    }

    // If no data is provided, we'll go and query the top products
    return <TopProducts count={count} />;
  }, [count, data, color]);

  return (
    <Section heading={title} color={color} padding="y" {...props}>
      <div className="swimlane md:pb-8 md:scroll-px-8 lg:scroll-px-12 md:px-8 lg:px-12">
        {productCardsMarkup}
      </div>
    </Section>
  );
}

function ProductCards({products, color}) {
  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3,
        },
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  return (
    <Slider {...settings}>
      {products.map((product) => (
        <div key={product.id} className="snap-center w-56 p-2">
          <ProductCard product={product} key={product.id} color={color} />
        </div>
      ))}
    </Slider>
  );
}

function RecommendedProducts({productId, count, color}) {
  const {
    language: {isoCode: languageCode},
    country: {isoCode: countryCode},
  } = useLocalization();

  const {data: products} = useShopQuery({
    query: RECOMMENDED_PRODUCTS_QUERY,
    variables: {
      count,
      productId,
      languageCode,
      countryCode,
    },
  });

  const mergedProducts = products.recommended
    .concat(products.additional.nodes)
    .filter(
      (value, index, array) =>
        array.findIndex((value2) => value2.id === value.id) === index,
    );

  const originalProduct = mergedProducts
    .map((item) => item.id)
    .indexOf(productId);

  mergedProducts.splice(originalProduct, 1);

  return <ProductCards color={color} products={mergedProducts} />;
}

function TopProducts({count, color}) {
  const {
    data: {products},
  } = useShopQuery({
    query: TOP_PRODUCTS_QUERY,
    variables: {
      count,
    },
  });
  return <ProductCards color={color} products={products.nodes} />;
}

const RECOMMENDED_PRODUCTS_QUERY = gql`
  ${PRODUCT_CARD_FRAGMENT}
  query productRecommendations(
    $productId: ID!
    $count: Int
    $countryCode: CountryCode
    $languageCode: LanguageCode
  ) @inContext(country: $countryCode, language: $languageCode) {
    recommended: productRecommendations(productId: $productId) {
      ...ProductCard
    }
    additional: products(first: $count, sortKey: BEST_SELLING) {
      nodes {
        ...ProductCard
      }
    }
  }
`;

const TOP_PRODUCTS_QUERY = gql`
  ${PRODUCT_CARD_FRAGMENT}
  query topProducts(
    $count: Int
    $countryCode: CountryCode
    $languageCode: LanguageCode
  ) @inContext(country: $countryCode, language: $languageCode) {
    products(first: $count, sortKey: BEST_SELLING) {
      nodes {
        ...ProductCard
      }
    }
  }
`;

Error is as follows

npm ERR! code ENOENT

PS C:\shopify\palacio-85\palacio-85> npm run dev



> palacio-85@0.0.0 dev

> shopify hydrogen dev



> Local: http://localhost:3000/

> Network: use \--host` to expose`



<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/palacioBanner.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/palacioBanner2.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/palacioBanner3.png

ERROR: TypeError: Cannot call a class as a function

at _classCallCheck (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:28:99)

at Slider (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:60:5)

at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1048:12)

at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1363:21)

at Object.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1017:14)

at stringify (<anonymous>)

at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:164:14)

at retrySegment (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1606:26)

at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1635:7)

at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1127:14)

ERROR: TypeError: Cannot call a class as a function

at _classCallCheck (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:28:99)

at Slider (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:60:5)

at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1048:12)

at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1363:21)

at Object.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1017:14)

at stringify (<anonymous>)

at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:164:14)

at retrySegment (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1606:26)

at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1635:7)

at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1127:14)

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/palacioBanner3.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/neon3.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/neon2.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/neon.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/neon4.png

<Image/>: when 'src' is provided, 'alt' should also be provided. Image: /src/assets/palacioBanner.png

ERROR: TypeError: Cannot call a class as a function

at _classCallCheck (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:28:99)

at Slider (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:60:5)

at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1048:12)

at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1363:21)

at Object.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1017:14)

at stringify (<anonymous>)

at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:164:14)

at retrySegment (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1606:26)

at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1635:7)

at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1127:14)

ERROR: TypeError: Cannot call a class as a function

at _classCallCheck (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:28:99)

at Slider (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:60:5)

at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1048:12)

at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1363:21)

at Object.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1017:14)

at stringify (<anonymous>)

at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:164:14)

at retrySegment (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1606:26)

at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1635:7)

at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1127:14)

GET streaming SSR 200 2151.05 ms http://localhost:3000/

GET streaming SSR 404 152.24 ms http://localhost:3000/@vite/client.js

ERROR: TypeError: Cannot call a class as a function

at _classCallCheck (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:28:99)

at Slider (C:\shopify\palacio-85\palacio-85\node_modules\react-slick\lib\slider.js:60:5)

at attemptResolveElement (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1048:12)

at resolveModelToJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1363:21)

at Object.toJSON (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1017:14)

at stringify (<anonymous>)

at processModelChunk (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:164:14)

at retrySegment (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1606:26)

at performWork (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1635:7)

at eval (/node_modules/@shopify/hydrogen/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js?v=c3234b8a:1127:14)

Answer 1

Had the same problem. You need to create a client file containing the carousel. Something like this:

 <Slider {...settings}>
  {products.map((product) => (
    <ProductCard
      product={product}
      key={product.id}
    />
  ))}
</Slider>

And call it in your ProductSwimlane server file:

function ProductCards({products}) {
  return <ProductCarousel products={products} />
}

Also better to use the import Slider from '@ant-design/react-slick' than just react-slick to fix some hydration problems.