Typescript error: is not assignable to type 'Record<string, SliceComponentType<any, unknown>>'

Developing with Prismic
1

Hi there!

We just run the slice machine npm run slicemachine and we started to get this error:

FROM AWS:

Failed to compile.
2023-05-25T14:07:31.859Z [WARNING]: ./pages/slice-simulator.tsx:9:51
                                    Type error: Type '{ disclosure: ComponentType<DisclosureProps>; feedback: ComponentType<FeedbackProps>; heading: ComponentType<HeadingProps>; ... 11 more ...; user_consent: ComponentType<...>; }' is not assignable to type 'Record<string, SliceComponentType<any, unknown>>'.
                                    Property 'test_slice' is incompatible with index signature.
                                    Type 'ComponentType<{ slice: any; }>' is not assignable to type 'SliceComponentType<any, unknown>'.
                                    Type 'ComponentClass<{ slice: any; }, any>' is not assignable to type 'SliceComponentType<any, unknown>'.
                                    Type 'ComponentClass<{ slice: any; }, any>' is not assignable to type 'ComponentClass<SliceComponentProps<any, unknown>, any>'.
                                    Construct signature return types 'Component<{ slice: any; }, any, any>' and 'Component<SliceComponentProps<any, unknown>, any, any>' are incompatible.
                                    The types of 'props' are incompatible between these types.
                                    Type 'Readonly<{ slice: any; }>' is missing the following properties from type 'Readonly<SliceComponentProps<any, unknown>>': index, slices, context

FROM LOCAL:

- info Loaded env from D:\Trabajo\Development\get-elastech\my-zoleo-v2\.env
- info Linting and checking validity of types ...- error ESLint: Failed to load plugin '@typescript-eslint' declared in '.eslintrc.json': Cannot find module '@typescript-eslint/eslint-plugin' Require stack: - D:\Trabajo\Development\get-elastech\my-zoleo-v2\__placeholder__.js
- info Linting and checking validity of types ..Failed to compile.

./pages/slice-simulator.tsx:9:51
Type error: Type '{ disclosure: ComponentType<DisclosureProps>; feedback: ComponentType<FeedbackProps>; heading: ComponentType<HeadingProps>; ... 10 more ...; user_consent: ComponentType<...>; }' is not assignable to type 'Record<string, SliceComponentType<any, unknown>>'.
  Property 'test_slice' is incompatible with index signature.
    Type 'ComponentType<{ slice: any; }>' is not assignable to type 'SliceComponentType<any, unknown>'.
      Type 'ComponentClass<{ slice: any; }, any>' is not assignable to type 'SliceComponentType<any, unknown>'.   
        Type 'ComponentClass<{ slice: any; }, any>' is not assignable to type 'ComponentClass<SliceComponentProps<any, unknown>, any>'.
          Construct signature return types 'Component<{ slice: any; }, any, any>' and 'Component<SliceComponentProps<any, unknown>, any, any>' are incompatible.
            The types of 'props' are incompatible between these types.
              Type 'Readonly<{ slice: any; }>' is missing the following properties from type 'Readonly<SliceComponentProps<any, unknown>>': index, slices, context

   7 |   return (
   8 |     <SliceSimulator
>  9 |       sliceZone={(props) => <SliceZone {...props} components={components} />}
     |                                                   
  10 |     />
  11 |   );
  12 | };

Some idea that what it is happening? We just run the slicemachine an start this error.

4

Hello @devops_support,

Thanks for reaching out to us.

The error shows that the test_slice component is most likely not fully typed, which is causing the TypeScript error. It can be fixed by fully typing the TestSlice component.

Could you share your TestSlice component?

Thanks,
Racheal.

5

Hi @racheal.orukele ,

It seems that the problem comes from slice-simulator.tsx

image
image1919×1079 277 KB

I let the TestSlice component:

image
image1919×1079 292 KB

I deleted that slice too because we don't need it, but the error persist.

Also I found another error too:

image
image1919×1079 349 KB

This is pretty weird. After update slicemachine this starts to happen.

7

Hello @devops_support,

The fix is to add types to all Slice component files. This is only required if <SliceZone> is type checked, such as in a .tsx file.

In JavaScript files (e.g., slices/Text/index.js ), types can be defined like this:

/**
 * @typedef {import("@prismicio/client").Content.TextSlice} TextSlice
 * @typedef {import("@prismicio/react").SliceComponentProps<TextSlice>} TextProps
 *
 * @param {TextProps}
 */
export default function Text({ slice }) {
  // ...
}

In TypeScript files (e.g., slices/Text/index.tsx ), types can be defined like this:

import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";

export default function Text({
  slice,
}: SliceComponentProps<Content.QuoteSlice>) {
  // ...
}

Again, all Slices should have types if used in a TypeScript project. More details on typing Slice components can be found here: Use TypeScript with Next.js - Documentation - Prismic
And more details on TypeScript with Prismic, in general, can be found here: Use TypeScript with Next.js - Documentation - Prismic.

Thanks,
Racheal.

8

Hey I have the same error. But I also have an error whenever I am trying to import { Content } from "@prismicio/client"; says that client has no exported member Content. What is the problem here? The index.ts file just suddenly appeared instead of index.js... and all error started..

12

Hello @kelemenbalazs,

Welcome to Prismic community, and thanks for reaching out to us!

The error can happen if the TypeScript server does not see your prismicio-types.d.ts file. If you haven't found a fix for the error, you can try the following:

  • Use the latest version of slice-machine-ui and their adapter (Next.js: @slicemachine/adapter-next, Nuxt: @slicemachine/adapter-nuxt).
  • Ensure the generated prismicio-types.d.ts is included their tsconfig.json config. Most projects include it by default, but it may need to be explicitly included if it has a custom tsconfig.json.
  • Open the prismicio-types.d.ts file in the code editor. tsserver sometimes needs to open the file in order to load the Content type into memory.

Thanks,
Racheal.

13

I am having the same error for 2 of my custom types.
I tried all 3 options but it didn't fix my error.

image
image712×277 38.7 KB