Failed to load PDP and Quick View

[codewode]

HI,

The checkout process all works fine, but the product quick view or product details page are empty and I see the following error in the console.

​ using host: https://api.europe-west1.gcp.commercetools.com
vue.runtime.esm.js?2b0e:619 [Vue warn]: [vue-composition-api] already installed. Vue.use(VueCompositionAPI) should be called only once.
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

found in

---> <Root> at src/components/root/root.vue
       <App> at src/App/App.vue
         <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1897 Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
    at assert (vue-composition-api.mjs?ed09:34)
    at getVueConstructor (vue-composition-api.mjs?ed09:315)
    at isComponentInstance (vue-composition-api.mjs?ed09:447)
    at setupAccessControl (vue-composition-api.mjs?ed09:666)
    at reactive (vue-composition-api.mjs?ed09:874)
    at ref (vue-composition-api.mjs?ed09:550)
    at setup (root.js?ae5b:49)
    at mergedSetupFn (vue-composition-api.esm.js?a6f4:2079)
    at eval (vue-composition-api.esm.js?a6f4:1852)
    at activateCurrentInstance (vue-composition-api.esm.js?a6f4:1772)
logError @ vue.runtime.esm.js?2b0e:1897
:8080/DE/en/:1 Error while trying to use the following icon from the Manifest: http://localhost:8080/img/icons/android-chrome-192x192.png (Download error or resource isn't a valid image)
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

found in

---> <ProductQuickView> at src/components/productoverview/ProductQuickView/ProductQuickView.vue
       <PageProductOverview> at src/components/productoverview/PageProductOverview/PageProductOverview.vue
         <Root> at src/components/root/root.vue
           <App> at src/App/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1897 Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
    at assert (vue-composition-api.mjs?ed09:34)
    at getVueConstructor (vue-composition-api.mjs?ed09:315)
    at isComponentInstance (vue-composition-api.mjs?ed09:447)
    at setupAccessControl (vue-composition-api.mjs?ed09:666)
    at reactive (vue-composition-api.mjs?ed09:874)
    at ref (vue-composition-api.mjs?ed09:550)
    at eval (useProductQuery.js?5a87:11)
    at setup (ProductQuickView.js?28e4:34)
    at mergedSetupFn (vue-composition-api.esm.js?a6f4:2079)
    at eval (vue-composition-api.esm.js?a6f4:1852)
logError @ vue.runtime.esm.js?2b0e:1897
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "product" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ProductQuickView> at src/components/productoverview/ProductQuickView/ProductQuickView.vue
       <PageProductOverview> at src/components/productoverview/PageProductOverview/PageProductOverview.vue
         <Root> at src/components/root/root.vue
           <App> at src/App/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function."

found in

---> <ProductInfo> at src/components/productdetail/ProductInfo/ProductInfo.vue
       <PageProductDetail> at src/components/productdetail/PageProductDetail/PageProductDetail.vue
         <Root> at src/components/root/root.vue
           <App> at src/App/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619
vue.runtime.esm.js?2b0e:1897 Error: [vue-composition-api] must call Vue.use(VueCompositionAPI) before using any function.
    at assert (vue-composition-api.mjs?ed09:34)
    at getVueConstructor (vue-composition-api.mjs?ed09:315)
    at isComponentInstance (vue-composition-api.mjs?ed09:447)
    at setupAccessControl (vue-composition-api.mjs?ed09:666)
    at reactive (vue-composition-api.mjs?ed09:874)
    at ref (vue-composition-api.mjs?ed09:550)
    at eval (useProductQuery.js?5a87:11)
    at setup (ProductInfo.js?f749:20)
    at mergedSetupFn (vue-composition-api.esm.js?a6f4:2079)
    at eval (vue-composition-api.esm.js?a6f4:1852)
logError @ vue.runtime.esm.js?2b0e:1897
vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "product" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <ProductInfo> at src/components/productdetail/ProductInfo/ProductInfo.vue
       <PageProductDetail> at src/components/productdetail/PageProductDetail/PageProductDetail.vue
         <Root> at src/components/root/root.vue
           <App> at src/App/App.vue
             <Root>
warn @ vue.runtime.esm.js?2b0e:619```

please advise if some settings or dependency is missing?

[harm-meijer]

@codewode Looks like a dependency problem, could you try deleting node_modules and install the dependencies with yarn install --frozen-lockfile?

[codewode]

many thanks for the hint, I am using npm and with following command, the problem got fixed npm install --force

seems like old dependencies were cached.