I am in the process of developing a product catalogue website using Nuxt and Prismic. Currently, my focus is on fetching navigation sections (product categories) from Prismic to display them in a sidebar.
Although everything appears to be functioning correctly (content loads and displays as intended), I am encountering the following errors in the terminal window while 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 |
Despite these errors in the terminal, there are no visible issues in the Chrome console output.
Below is the code snippet for 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 related to the declaration file used to provide TypeScript type information about the Prismic API. This file is located in a types folder and referenced in:
"files": [
"prismic.d.ts"
]
within tsconfig.json.
If anyone has any suggestions, they would be greatly appreciated.
EDIT:
Upon running npm run dev from VSCode instead of a separate terminal window, errors throughout the project arise whenever a Prismic type is utilized. The following error message stands out:
import { PrismicAPI } from '~/types/prismic'Cannot find module '~/types/prismic' or its corresponding type declarations.