Slice Simulator typing issue

Developing with Prismic
1

Hi
I'm using prismic with nextjs and after upgrading to the latest js sdk and migrating my old components, i started adding types to those components.
This problem does not show up on the live SliceZone in my "pages" directory.
My problem surfaced when i created the slice-simulator.tsx file

import { SliceZone } from "@prismicio/react";
import { SliceSimulator } from "@prismicio/slice-simulator-react";

import { components } from "~/slices";

import state from "../.slicemachine/libraries-state.json";

const SliceSimulatorPage = () => (
  <SliceSimulator
    // The "sliceZone" prop should be a function receiving slices and rendering them using your "SliceZone" component.
    sliceZone={(props) => <SliceZone {...props} components={components} />}
    state={state}
  />
);

export default SliceSimulatorPage;

The issue i get is emited for the components prop. This is the specific error i get

TS2322: Type '{ carousel: FunctionComponent<SliceComponentProps<CarouselSlice, unknown>>; categories: ({ slice }: SliceComponentProps<CategoriesSlice, unknown>) => JSX.Element; ... 11 more ...; why_us: ({ slice }: SliceComponentProps<...>) => JSX.Element; }' is not assignable to type 'SliceZoneComponents<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>'.   Property 'carousel' is incompatible with index signature.     Type 'FunctionComponent<SliceComponentProps<CarouselSlice, unknown>>' is not assignable to type 'SliceComponentType<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>'.       Type 'FunctionComponent<SliceComponentProps<CarouselSlice, unknown>>' is not assignable to type 'FunctionComponent<SliceComponentProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>>'.         Types of parameters 'props' and 'props' are incompatible.           Type 'PropsWithChildren<SliceComponentProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>>' is not assignable to type 'PropsWithChildren<SliceComponentProps<CarouselSlice, unknown>>'.             Type 'PropsWithChildren<SliceComponentProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<...>, Record<...>>>, unknown>>' is not assignable to type 'SliceComponentProps<CarouselSlice, unknown>'.               Types of property 'slice' are incompatible.                 Type 'Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<string, SharedSliceVariation<string, Record<string, AnyRegularField>, Record<...>>>' is not assignable to type 'CarouselSlice'.                   Type 'Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>>' is not assignable to type 'Slice<"carousel", never, CarouselItem>'.                     Type 'string' is not assignable to type '"carousel"'.  index.d.ts(508, 5): The expected type comes from property 'components' which is declared here on type 'IntrinsicAttributes & SliceZoneProps<Slice<string, Record<string, AnyRegularField>, Record<string, AnyRegularField>> | SharedSlice<...>, unknown>'

this is the type that is supposed to be having an issue.

import {
  ImageField,
  KeyTextField,
  LinkField,
  RichTextField,
  Slice,
} from "@prismicio/types";

type CarouselItem = {
  title: RichTextField;
  text: RichTextField;
  image: ImageField;
  ctaText: KeyTextField;
  ctaLink: LinkField;
};

export type CarouselSlice = Slice<"carousel", never, CarouselItem>;

I have a second question, unrelated to this problem.
Do i need to check in the slice-simulator.tsx in git?
If so what should happen with this page in production.

3

Hello @nathalie, I'll ask the team and let you know their thoughts as soon as possible.

Thanks

5

Thank you

6

No problem :ok_hand:

7

Hey @nathalie, could you show us the index.js file at the root of the slices folder?

About the slice-simulator.txs file. The team suggests that if you don't want it to appear in production you could do something like this:

export default process.env.NODE_ENV === "production" ? undefined : SliceSimulatorPage

Or use a built-in framework way of excluding pages from the build.

Thanks

8

We'll work on a fix for this issue. And in the meantime, you can add a @ts-ignore flag on your Slice Simulator page to keep working.

And if you could share a minimal reproduction of your project, that could help us understand your use case better.

9

Hello.
Thank you for your answer.
I can share the files needed to reproduce the issue but where should i send them?

10

You can post them in a zip file here or in a private DM.