Nuxt•2y ago

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

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•2y ago

Message Not Public

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...

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•2y ago

Message Not Public

Gaming

Programming

nuxt instance unavailable during fetch data