Nuxt3 typescript issue 'Content not found in '@prismicio/client'' and issue in the slices/index.ts

[jankohlbach]

I set up a fresh new project with nuxt3 and prismic, but I'm running into two typescript issues I cannot solve
1:
in the slices/index.ts file (this I can solve by adding

  "include": [
    "prismicio-types.d.ts",
    "**/*.ts",
  ],

to the tsconfig, but then I have errors in all .vue files)
probably because this is then overriding the default nuxt tsconfig, but I don't know how I could add it otherwise (there is an option to add in the nuxt.config, but that for some reason doesn't work like it should)

2:
and the other error in the slices index.vue file saying Content not found in '@prismicio/client'

[jankohlbach]

update:
found out when I remove my .eslintrc

{
  "root": true,
  "extends": [
    "@nuxtjs/eslint-config-typescript"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "extraFileExtensions": [
      ".vue"
    ]
  },
  "rules": {
    "vue/multi-word-component-names": [
      "off",
      {
        "ignores": []
      }
    ]
  }
}

then at least the issue with the 'Content not found in '@prismicio/client'' is gone, but then I also lose my eslint config so not the ultimate solution

the other error in the slices/index.ts is still there though

[jankohlbach]

another update:

writing it like

import * as prismic from '@prismicio/client'

// The array passed to `getSliceComponentProps` is purely optional.
// Consider it as a visual hint for you when templating your slice.
defineProps(
  getSliceComponentProps<prismic.Content.ScalingHeadlineSlice>([
    'slice',
    'index',
    'slices',
    'context'
  ])
)

works, but the other issue persists, and it would be nice to have the generated code by slicemaching to be correct in the first place

[lihbr (Lucie)]

Hey @jankohlbach, sorry for the delay!

This looks like it's an ESLint issue with the import plugin used by @nuxtjs/eslint-config-typescript.

For transparency, we're currently reworking our ESLint packages at Nuxt, so this might get solved in the future, in the meantime, here are some workarounds (you should not need to update your tsconfig.json with those):

Disabling import/named rule

Since the project is TypeScript, it will already yell at you if you attempt to import something that does not exists, so I find this rule a bit redundant. If that works for you too, you can disable it this way:

"rules": {
  "import/named": "off"
}

Telling eslint-plugin-import to ignore Prismic module

An alternative if to configure eslint-plugin-import to consider @prismicio/client to be there. It can be achieved this way in your ESLint config:

"settings": {
  "import/core-modules": [
    "@pprismicio/client"
  ]
}

---

We'll keep looking for simpler workarounds, but for now this should help you move forward. Let us know if anything!

[jankohlbach]

hey @lihbr
thanks a lot, both works, that's more than enough for now
I still have the error in the slices/index.ts file though
I already added this file to a .eslintignore so the eslint errors are gone, but there still persist the typescript errors

the full error:

Type 'DefineComponent<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<SliceZoneLike<SliceLike<string>>>; required: true; }; context: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'string | SliceComponentType<any, unknown>'.
  Type 'DefineComponent<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<SliceZoneLike<SliceLike<string>>>; required: true; }; context: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'DefineComponent<{}, {}, any>'.
    Type 'DefineComponent<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<SliceZoneLike<SliceLike<string>>>; required: true; }; context: { ...; }; }, ... 11 more ..., {}>' is not assignable to type 'ComponentOptionsBase<Readonly<ExtractPropTypes<{}>>, {}, any, ComputedOptions, MethodOptions, ComponentOptionsMixin, ... 6 more ..., {}>'.
      Types of property 'setup' are incompatible.
        Type '((this: void, props: LooseRequired<Readonly<ExtractPropTypes<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<...>; required: true; }; context: { ...; }; }>> & {}>, ctx: { ...; }) => void | ... 2 more ... | Promise<...>) ...' is not assignable to type '((this: void, props: LooseRequired<Readonly<ExtractPropTypes<{}>> & {}>, ctx: { attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<...> | undefined) => void; }) => void | ... 2 more ... | Promise<...>) | undefined'.
          Type '(this: void, props: LooseRequired<Readonly<ExtractPropTypes<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<...>; required: true; }; context: { ...; }; }>> & {}>, ctx: { ...; }) => void | ... 2 more ... | Promise<...>' is not assignable to type '(this: void, props: LooseRequired<Readonly<ExtractPropTypes<{}>> & {}>, ctx: { attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: (exposed?: Record<...> | undefined) => void; }) => void | ... 2 more ... | Promise<...>'.
            Types of parameters 'props' and 'props' are incompatible.
              Type 'LooseRequired<Readonly<ExtractPropTypes<{}>> & {}>' is missing the following properties from type 'LooseRequired<Readonly<ExtractPropTypes<{ slice: { type: PropType<ScalingHeadlineSlice>; required: true; }; index: { type: PropType<number>; required: true; }; slices: { type: PropType<SliceZoneLike<...>>; required: true; }; context: { ...; }; }>> & {}>': slice, index, slices, contextts(2322)
SliceZone.d.ts(164, 93): The expected type comes from property 'scaling_headline' which is declared here on type 'SliceZoneComponents<any, unknown>'
(property) scaling_headline: DefineComponent<{
    slice: {
        type: globalThis.PropType<ScalingHeadlineSlice>;
        required: true;
    };
    index: {
        type: globalThis.PropType<number>;
        required: true;
    };
    slices: {
        ...;
    };
    context: {
        ...;
    };
}, ... 11 more ..., {}>

[lihbr (Lucie)]

Nice! Was able to solve that one by removing the includes array from the tsconfig.json at your project root Seems like it doesn't merge with Nuxt's generated one.

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
}

[jankohlbach]

you mean by removing these lines completely? don't have a custom includes rule
then I have errors in other vue components ...
think it does merge actually

[jankohlbach]

the /slices/index.ts issue is solved by an update of the @prismicio/vue package inside the prismic nuxt package, hooray, thanks again