N
Nuxt•2y ago
szobi

nuxt instance unavailable during fetch data

after ugrade from 3.0.0 to 3.3.2 l have a problem with fetch data in pinia store ( lm using setup store type) trackbase 
Error: nuxt instance unavailable                                                                                                                                                                                           16:55:33
    at Module.useNuxtApp (/home/szobi/code/1-front/node_modules/nuxt/dist/app/nuxt.js:189:13)
    at Module.useAppConfig (/home/szobi/code/1-front/node_modules/nuxt/dist/app/config.js:32:41)
    at getProductOpinion (/home/szobi/code/1-front/stores/products.ts:62:56)
    at Proxy.getProduct (/home/szobi/code/1-front/stores/products.ts:42:13)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async setup (/home/szobi/code/1-front/pages/product/[slug].vue:90:164)
Error: nuxt instance unavailable                                                                                                                                                                                           16:55:33
    at Module.useNuxtApp (/home/szobi/code/1-front/node_modules/nuxt/dist/app/nuxt.js:189:13)
    at Module.useAppConfig (/home/szobi/code/1-front/node_modules/nuxt/dist/app/config.js:32:41)
    at getProductOpinion (/home/szobi/code/1-front/stores/products.ts:62:56)
    at Proxy.getProduct (/home/szobi/code/1-front/stores/products.ts:42:13)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async setup (/home/szobi/code/1-front/pages/product/[slug].vue:90:164)
its my pages code: 
[slug].vlue
try {
    await productStore.getProduct(route.params.slug, EProductType.SINGLE)
} catch (e) {
    showError({ statusCode: EErrorStatus.ERROR_404, statusMessage: 'Pages Not Found' })
}
[slug].vlue
try {
    await productStore.getProduct(route.params.slug, EProductType.SINGLE)
} catch (e) {
    showError({ statusCode: EErrorStatus.ERROR_404, statusMessage: 'Pages Not Found' })
}
method in pinia: 
    const getProduct = async (
        slug: string | number,
        expectedType: EProductType,
        options: CustomFetchOptions | null = null,
    ) => {
        const { $sdk } = useNuxtApp()
        opinions.value = []

        try {
            const response = await $sdk.api.products(
                options || {
                    query: { slug },
                },
            )
            product.value = response.data
            if (product.value?.type !== expectedType) {
                throw new Error('Product type is not expected ')
            }

            await getProductOpinion()
        } catch (err) {
            errorHandler(err)
        }
    }
    const getProduct = async (
        slug: string | number,
        expectedType: EProductType,
        options: CustomFetchOptions | null = null,
    ) => {
        const { $sdk } = useNuxtApp()
        opinions.value = []

        try {
            const response = await $sdk.api.products(
                options || {
                    query: { slug },
                },
            )
            product.value = response.data
            if (product.value?.type !== expectedType) {
                throw new Error('Product type is not expected ')
            }

            await getProductOpinion()
        } catch (err) {
            errorHandler(err)
        }
    }
$sdk is my module where hold useApi composable based on useFetch any ideas with this error?
5 Replies
szobi
szobiOP•2y ago
aah and its getProductOpinion method 
    const getProductOpinion = async (loadMore = false) => {
        const { opinionsItemPage } = useAppConfig()
        if (loadMore && isLastOpinionPage.value) return
        try {
            const response = await $sdk.api.opinionsByProductId(product.value.id, {
                query: {
                    per_page: opinionsItemPage,
                    page: loadMore ? opinionsMeta.value.currentPage + 1 : 1,
                },
            })
            opinionsMeta.value = response.meta
            opinions.value = [...opinions.value, ...response.data]
        } catch (err) {
            errorHandler(err)
        }
    }
    const getProductOpinion = async (loadMore = false) => {
        const { opinionsItemPage } = useAppConfig()
        if (loadMore && isLastOpinionPage.value) return
        try {
            const response = await $sdk.api.opinionsByProductId(product.value.id, {
                query: {
                    per_page: opinionsItemPage,
                    page: loadMore ? opinionsMeta.value.currentPage + 1 : 1,
                },
            })
            opinionsMeta.value = response.meta
            opinions.value = [...opinions.value, ...response.data]
        } catch (err) {
            errorHandler(err)
        }
    }
any solutions? 🥺
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View
manniL
manniL•2y ago
See https://github.com/nuxt/nuxt/issues/14723
GitHub
Document composables concept · Issue #14723 · nuxt/nuxt
Nuxt 3 uses Vue 3 with Composition API and unjs/unctx for supporting composables with the implicit context in nuxtApp (plugins, middleware) and nuxt kit too. However, there are many cases in this n...
szobi
szobiOP•2y ago
l had two case one when request was nasted in pinia store method ( setup setting) 
    const getProduct = async (
        slug: string | number,
        expectedType: EProductType,
        options: CustomFetchOptions | null = null,
    ) => {
        const { $sdk } = useNuxtApp()
        opinions.value = []

        const courseStore = useCourses()
        isProcessing.value = true
        try {
            const response = await $sdk.api.products(
                options || {
                    query: { slug },
                },
            )
            product.value = response.data
            if (product.value?.type !== expectedType) {
                throw new Error('Product type is not expected ')
            }

// herre error
            // await getProductOpinion()
        } catch (err) {
            errorHandler(err)
        } finally {
            isProcessing.value = false
        }
    }
    const getProduct = async (
        slug: string | number,
        expectedType: EProductType,
        options: CustomFetchOptions | null = null,
    ) => {
        const { $sdk } = useNuxtApp()
        opinions.value = []

        const courseStore = useCourses()
        isProcessing.value = true
        try {
            const response = await $sdk.api.products(
                options || {
                    query: { slug },
                },
            )
            product.value = response.data
            if (product.value?.type !== expectedType) {
                throw new Error('Product type is not expected ')
            }

// herre error
            // await getProductOpinion()
        } catch (err) {
            errorHandler(err)
        } finally {
            isProcessing.value = false
        }
    }
and solved it by move getProductOpinion to try catch in page vue 
try {
    await productStore.getProduct(route.params.slug, EProductType.SINGLE)
productStore.getProductOpinion()
} catch (e) {
    showError({ statusCode: EErrorStatus.ERROR_404, statusMessage: 'Pages Not Found' })
}
try {
    await productStore.getProduct(route.params.slug, EProductType.SINGLE)
productStore.getProductOpinion()
} catch (e) {
    showError({ statusCode: EErrorStatus.ERROR_404, statusMessage: 'Pages Not Found' })
}
secound case is move try catch from function getCourse() to try catch in script setup root
Unknown User
Unknown User•2y ago
Message Not Public
Sign In & Join Server To View

Did you find this page helpful?