Error with slicemachine variations alpha in nextjs

Developing with Prismic
1

Hello! I'm integrating Slice machine into an existing NextJs project, and I'm running into a problem using slice-machine-ui and the variations alpha, version 0.1.0-alpha.4.

I've gotten slice-machine-ui working without the variations alpha, and it all works just fine. However, when I install the alpha, run prismic sm --develop and pull up the dev server in my browser, I'm getting this error:

[slice-machine] (node:14489) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'map' of undefined
    at Object.getComponentInfo (../../../lib/queries/component.ts:91:6)
    at ../../../lib/queries/listComponents.ts:43:29
    at Array.reduce (<anonymous>)
    at handleLibraryPath (../../../lib/queries/listComponents.ts:41:56)
    at ../../../lib/queries/listComponents.ts:72:28
    at Array.map (<anonymous>)
    at Object.listComponentsByLibrary (../../../lib/queries/listComponents.ts:72:5)
    at getLibrariesWithFlags (../../../../server/src/api/libraries.ts:24:27)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at handler (../../../../server/src/api/state.ts:82:52)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:14489) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 2)

[slice-machine] (node:14489) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

This is my index file within my slices directory:

export { BannerWithCaption } from './BannerWithCaption';
export { BrandValues } from './BrandValues';
export { ContentBlock } from './ContentBlock';
export { ContentGrid } from './ContentGrid';
export { ContentSlider } from './ContentSlider';
export { Embed } from './Embed';
export { GetStarted } from './GetStarted';
export { Heading } from './Heading';
export { HeroCollage } from './HeroCollage';
export { HeroVideo } from './HeroVideo';
export { Hero } from './Hero';
export { MasonryGrid } from './MasonryGrid';
export { ProductConfigurator } from './ProductConfigurator';
export { ProductDiscovery } from './ProductDiscovery';
export { ProductsGrid } from './ProductsGrid';
export { ProductsScroller } from './ProductsScroller';
export { Video } from './Video';

And this is what my custom SliceZone component looks like (gotta use a custom one, I'm using getServerSideProps throughout my project, so the next-slicezone package doesn't work for me. Unless I'm wrong, feel free to throw that into this as well):

import React from 'react';

import { BannerWithCaption } from 'components/slices/BannerWithCaption';
import { BrandValues } from 'components/slices/BrandValues';
import { ContentBlock } from 'components/slices/ContentBlock';
import { ContentGrid } from 'components/slices/ContentGrid';
import { ContentSlider } from 'components/slices/ContentSlider';
import { Embed } from 'components/slices/Embed';
import { GetStarted } from 'components/slices/GetStarted';
import { Heading } from 'components/slices/Heading';
import { Hero } from 'components/slices/Hero';
import { HeroCollage } from 'components/slices/HeroCollage';
import { HeroVideo } from 'components/slices/HeroVideo';
import { MasonryGrid } from 'components/slices/MasonryGrid';
import { ProductConfigurator } from 'components/slices/ProductConfigurator';
import { ProductDiscovery } from 'components/slices/ProductDiscovery';
import { ProductsGrid } from 'components/slices/ProductsGrid';
import { ProductsScroller } from 'components/slices/ProductsScroller';
import { Video } from 'components/slices/Video';

interface SliceProps {
  slice: JSX.Element;
  slice_type: string;
}

interface SlicesProps {
  document: Record<string, any>;
}

export const SliceZone = ({ document }: SlicesProps) => {
  const { body } = document;
  const sliceComponents: { [key: string]: React.ElementType } = {
    hero: Hero,
    hero_collage: HeroCollage,
    hero_video: HeroVideo,
    brand_values: BrandValues,
    banner_with_caption: BannerWithCaption,
    content_block: ContentBlock,
    products_scroller: ProductsScroller,
    products_grid: ProductsGrid,
    product_configurator: ProductConfigurator,
    product_discovery: ProductDiscovery,
    video: Video,
    heading: Heading,
    content_grid: ContentGrid,
    content_slider: ContentSlider,
    masonry_grid: MasonryGrid,
    embed: Embed,
    get_started: GetStarted,
  };

  return (
    <>
      {body.map((slice: SliceProps, index: number) => {
        const SliceComponent = sliceComponents[slice.slice_type];
        if (SliceComponent) {
          return (
            <SliceComponent
              slice={slice}
              title={document.page_title}
              key={`${slice.slice_type}-${index}`}
            />
          );
        }
      })}
    </>
  );
};

Any idea why I'm getting this error in my console?

Thanks in advance,
Jesse

1 Like
3

So I don't think this error has anything to do with your Slice Zone as the slice-machine-ui doesn't read the Slice Zone it only reads the Slice Machine Slices defined locally in the Slices folder etc.

When you say Slices directory, are you including non-Slice Machine Slices in a base directory?

We've also moved on to alpha 7, I'll update the blog post.

Can you:

  1. Try deleting your node_modules and package-lock.json files and running npm i again?
  2. Show me the Slice model which you think might be breaking the this process?

Thanks.

5

It was definitely something on my end, I hadn't done my mocks correctly, hence the error.

Thanks!

1 Like
6

Hey Jesse,

I'm glad you worked this out. Would you mind sharing with us the exact error in the mocks that caused the issue? It would really help future users having this problem.

Thanks.

7

For sure. It was actually just a case of not having mocks for certain components, and within those mocks I did have, not having an array of items to map through. I figured that the UI would still launch even if there were errors in the components, but that wasn't the case, so I needed to make sure my mocks were correct.

8

Great, thanks for sharing. :slight_smile: I'll get to work soon on some docs which should make this clearer.

9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.