# Error with slicemachine variations alpha in nextjs

**URL:** <https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903>\
**Category:** Developing with Prismic\
**Tags:** slice-machine\
**Created:** [June 22, 2021, 11:32pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903 "2021-06-22T23:32:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [June 22, 2021, 11:32pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/1 "2021-06-22T23:32:07Z")

</div>

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:

```auto
[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:

```auto
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):

```auto
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

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 23, 2021, 2:16pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/3 "2021-06-23T14:16:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [June 23, 2021, 9:18pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/5 "2021-06-23T21:18:17Z")

</div>

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

Thanks!

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 24, 2021, 8:31am UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/6 "2021-06-24T08:31:33Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![jesse](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/jesse/32/2425_2.png) [@jesse](https://community.prismic.io/u/jesse)\
**Post date:** [June 24, 2021, 12:50pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/7 "2021-06-24T12:50:45Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\
**Post date:** [June 24, 2021, 12:52pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/8 "2021-06-24T12:52:46Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [June 25, 2021, 12:53pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/9 "2021-06-25T12:53:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\
**Post date:** [December 9, 2021, 5:53pm UTC](https://community.prismic.io/t/error-with-slicemachine-variations-alpha-in-nextjs/5903/10 "2021-12-09T17:53:28Z")

</div>