SSR rendering with plugins that modifies prototype

[alx13]

I'm having problem with SSR rendering of my project, which is using Vuetify:

1. Some of the components rely on existance of $vuetify property in the instance of Vue inherited from Vue.prototype (e.g., VToolbar).
   Obviously, createFakeInstance doesn't merge $vuetify from Vue.prototype into fake instance, causing rendering error in prefetchAll.
   Unfortunatelly there is no way to supress printing that error to the console.

2. Some components are using provide property of Vue component like in Themeable.
   createFakeInstance also ignores provide/inject definitions on component. So there is another rendering error.

The quick but very dirty solution for problems mentioned above is to allow to configure COMPONENT_BLACKLIST, for example, using options for install method of vue-apollo/ssr plugin, or by providing options to the prefetchAll method.

The less hacky solution for the first problem is to provide a list of Vue.prototype properties that should be inherited from Globals.Vue upon fakeInstance creation. Either with Vue.use(ApolloSSR, { inheritedProperties: ['$vuetify'] }), or in prefetchAll method.

For the second problem, I wasn't able to fix it in any way.

[yangning10000]

i also face the same issue. I downgraded the whole thing to 3.0.0.19. hopefully someone can help me solve the issue

[lcjnil]

Same issues here.

[beeplin]

Same issue here. I am using quasar which injects Vue.prototype.$q, therefore createFakeInstance are keeping printing errors.

This does not impact the prefetchAll behavior, since I also see all the graphql data correctly prefetched and sent to the client.

It does not impact the server-side rendering of the real quasar components which are using $q, since createFackeInstance seems only meaning to be walking the component tree to collect the apollo prefetch information, not meaning to render the real componets.

So I think the only problem is to surpress the error printing for this situation?

[gwardwell]

I'm experiencing the same issue. I'm adding a Vue plugin to my app and Apollo is throwing errors when I use it. Tracking the error, it looks exactly as @alx13 described: a result of the createFakeInstance not adding the plugin to the instance and walking causing the code to run, resulting in the error. The code looks like this:

// main.js
import Vue from 'vue';
import { DynamicImagePlugin } from './dynamic-image-js';
Vue.use(DynamicImagePlugin, {
    // add some options here...
});

<!-- VImg.vue -->
<script>
export default {
    computed: {
        src() {
            return this.$dynamicImage(
                // pass some arguments here...
            );
        },
    },
};
</script>

That code results in this error:

Error while rendering VImg
TypeError: this.$dynamicImage is not a function

On the plus side, these errors don't prevent Vue Apollo SSR from working. The app continues to SSR and run as expected. The down side is that my console is full of an insane number of errors making it hard to discern the real errors from the false positives.

What can we do to get this one solved?

[dylanmcgowan]

I'm also experiencing a SSR (nuxt) error concerning the prototype with VeeValidate

TypeError: Cannot read property '$validator' of undefined when injecting (the correct way)

and when not injecting:

TypeError: Cannot read property 'has' of undefined

I opened an issue with vee-validate and it turns out the error is getting caused by this new SSR stuff

It's critical that we can get a fix out for this, my app heavily depends on vue-apollo / nuxt / @nuxt/apollo-module / vee-validate.

I currently have to frankenstein deprecated versions together ([email protected], older release canidate versions of @nuxt/apollo-module) and I also have to run the beta.19 of this because apollo module requires the most recent vue apollo.

Retweeting @gwardwell : What can we do to get this one solved?

[Akryum]

Will be solved with vuejs/vue#9017

[beeplin]

This issue involves not only third-party plugins but also this.$root and properties injected via provide/inject.

@Akryum is there any time schedule for the new PR in the vue main repo to be merged and published? Looking forward to it~

[Akryum]

See #469