'Property does not exist' errors in terminal but not Chrome console - Nuxt/Prismic

Question

I'm using Nuxt and Prismic to create a product catalogue website. I'm currently working on fetching navigation sections (product categories) from Prismic to display in a sidebar.

Everything seems to be working fine (content loads and displays as expected), however I am seeing the following errors in the terminal window from which I am running npm run dev:

ERROR ERROR in components/Sidebar.vue:29:14
14:35:49 TS2339: Property 'fetch' does not exist on type '{ data(): { heading: string; sections: never[]; }; created(): void; methods: { fetch(): Promise; }; }'. 27 | }, 28 | created() { 29 | this.fetch() | ^^^^^ 30 | }, 31 | methods: { 32 | async fetch() {

ERROR in components/Sidebar.vue:35:20 TS2339: Property '$prismic' does not exist on type '{ fetch(): Promise; }'. 33 | const that = this; 34 | // TODO : Move Prismic call to actions.ts - this.$store.dispatch('fetchSections') 35 | await this.$prismic.api | ^^^^^^^^ 36 | .getByUID('navigation', 'categories') 37 | .then(function(document) { 38 | console.log(document)

ERROR in components/Sidebar.vue:37:24 TS7006: Parameter 'document' implicitly has an 'any' type. 35 | await this.$prismic.api 36 | .getByUID('navigation', 'categories') 37 | .then(function(document) { | ^^^^^^^^ 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data.nav

ERROR in components/Sidebar.vue:39:18 TS2339: Property 'heading' does not exist on type '{ fetch(): Promise; }'. 37 | .then(function(document) { 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text | ^^^^^^^ 40 | that.sections = document.data.nav 41 | }) 42 | }

ERROR in components/Sidebar.vue:40:18 TS2339: Property 'sections' does not exist on type '{ fetch(): Promise; }'. 38 | console.log(document) 39 | that.heading = document.data.doc_name[0].text 40 | that.sections = document.data.nav | ^^^^^^^^ 41 | }) 42 | } 43 | }

ERROR in components/SidebarSection.vue:43:26 TS2339: Property 'section' does not exist on type '{ name: string; props: { section: { type: ObjectConstructor; required: boolean; }; isCollapsed: { type: BooleanConstructor; }; }; mounted(): void; }'. 41 | }, 42 | mounted() { 43 | console.log(this.section.items[0].sub_nav_link_label[0].text) | ^^^^^^^ 44 | } 45 | } 46 |

This is despite the fact that I'm not seeing any errors in the Chrome console output.

Here is export default within Sidebar.vue:

export default {
    data() {
        return {
            heading: "",
            sections: []
        }
    },
    created() {
        this.fetch()
    },
    methods: {
        async fetch() {
            const that = this;
            // TODO : Move Prismic call to actions.ts - this.$store.dispatch('fetchSections')
            await this.$prismic.api
            .getByUID('navigation', 'categories')
            .then(function(document) {
                console.log(document)
                that.heading = document.data.doc_name[0].text
                that.sections = document.data.nav
            })
        }
    }
}

The only potential issue I can think of is that I'm using the following declaration file to provide typescript type information about the Prismic API: https://github.com/prismicio/prismic-vue/issues/5#issuecomment-723652806

Perhaps there could be an issue in the way in which I am linking this? It's within a types folder and I reference it within:

"files": [
  "prismic.d.ts"
]

in tsconfig.json.

Does anyone have any suggestions?

EDIT:

I just tried running npm run dev from within VSCode rather than a separate terminal window, and now I'm seeing errors throughout the project, whenever I try to use a Prismic type. This one is perhaps most telling:

import { PrismicAPI } from '~/types/prismic'

Cannot find module '~/types/prismic' or its corresponding type declarations.

Answer 1

I'm seeing this in your code:

that.heading =document.data.doc_name[0].text
that.sections = document.data.nav

It's meant to be:

this.heading =document.data.doc_name[0].text
this.sections = document.data.nav

That way you can access it from the reactive data.

Answer 2

This problem seems to be with the way, prismic.d.ts is included in tsconfig.json. Can you try to use include option instead of files in tsconfig.json, and use the absolute path of prismic.d.ts there? Like:

{
  "include": ["types/prismic.d.ts"]
}

Reference: https://www.typescriptlang.org/tsconfig#include