Nuxt.js: Property or method "$fetch" is not defined on the instance but referenced during render.

[qnp]

Versions

• nuxt: ^2.12.2 (2.14.4)
• node: 10 (10.21.0)

Reproduction

https://codesandbox.io/s/nuxt-fetch-reference-error-bf3yq

Steps to reproduce

I followed the documentation to use the fetch method: https://nuxtjs.org/api/pages-fetch/#when-to-use-fetch.
In the codesandbox minimal reproduction example, i just have a button with an event handler $fetch to click event, as suggested by the documentation.

What is Expected?

Mount page => No error. This is not the case.
(Click on "refresh" => Fetch working. This is the case.)

What is actually happening?

When mounting app client-side, these errors are fired:

[Vue warn]: Property or method "$fetch" 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

---> <Pages/index.vue> at pages/index.vue
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

alongside with:

[Vue warn]: Invalid handler for event "click": got undefined

found in

---> <Pages/index.vue> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

I appears that $fetch method is not properly initialized, but getting populated later on the lifecycle.
The workaround I found is to use this event handler: @click="() => $fetch()" which is not clean (and
which I have heard to be less efficient in terms of caching / rendering)

I bet a proper initialization of $fetch would be enough to overcome the issue.

Best regards

[Kolobok12309]

On server side $fetch is undefined, and it not defined in code, don't know why, but if handler not on root element for example this, all working normally

<template>
  <div>
    <button @click="$fetch">refresh</button
  </div>
</template>

Mb it help you

[qnp]

Thanks for the workaround. I cannot explain the bug then. Maybe nuxt team has more insights...

[pi0]

@Kolobok12309 If you want to make a PR to inject noop $fetch in SSR context, that would be great!