Vue-apollo: Cannot redefine property: $apollo when rebuilding with webpack

[LukasBombach]

Hey, we have a very simple setup with vue-cli (3.0.0) and vue-apollo (using the latest vue-cli-plugin-apollo (0.16.2)). We have a file that adds VueApollo to Vue and create a Vue instance:

main.js

import Vue from 'vue';
import VueApollo from 'vue-apollo';
// ...
Vue.use(VueApollo);

export async function createApp({ context, beforeApp = () => {}, afterApp = () => {} } = {}) {
    const apolloProvider = createApolloProvider({
        ssr: process.server,
    });
    // ...
    const app = new Vue({
        router,
        provide: apolloProvider.provide(),
        render: h => h(Page),
    });
    // ...
}

when we work in our project and webpack triggers a rebuild, everything crashes and we get the error

TypeError: Cannot redefine property: $apollo
    at Function.defineProperty (<anonymous>)
    at Function.install (node_modules/vue-apollo/dist/vue-apollo.esm.js:4031:0)
    at Function.Vue.use (/Users/lbombach/Bild/projects/delivery/red-delivery/red-delivery/node_modules/vue/dist/vue.runtime.common.js:4749:22)
    at Module../src/main.js (src/main.js:22:4)
    ...

Any help would be very appreciated 🖖

[IgorSzymanski]

You could try using:

if (!Vue.prototype.hasOwnProperty('$apollo')) {
  Vue.use(VueApollo);
}

But In my case, it's causing some more problems, so even if it works for you, I'd consider it a temporary fix. The issue needs to be addressed ASAP at it's causing some issues with SSR libraries.

[LukasBombach]

Hey @Akryum check this out: I created a new repo where you can see the bug. I also investigated that this bug occurs "out of the box". In this repo

https://github.com/LukasBombach/vue-apollo-redefine-bug-report

This is all i did:

vue create vue-apollo-plugin-no-example-code
vue add @akryum/ssr
vue add apollo # no example code and no server
yarn add isomorphic-fetch

I also had to make VueApollo use SSR mode and install isomorphic fetch. That is all I did.

Now if you do

yarn ssr:serve

and then edit a file, I tried this with App.vue everything will crash with the above mentioned error:

TypeError: Cannot redefine property: $apollo

which happens exactly here:

https://github.com/Akryum/vue-apollo/blob/master/src/index.js#L126

[Akryum]

I'm not sure if it's related, but you have to add the ssr plugin last.

[LukasBombach]

Gonna try that, that will probably fix the isomorphic fetch part, but maybe not apollo. Imma try now.

[LukasBombach]

Check out this repository:

https://github.com/LukasBombach/vue-apollo-redefine-bug-report-ssr-last

Steps I have done are:

vue create vue-apollo-plugin-ssr-last
vue add apollo
vue add @akryum/ssr
yarn ssr:serve

Now if you edit App.vue _and reload the page_ the server will break with

error during render : /
TypeError: Cannot redefine property: $apollo
    at Function.defineProperty (<anonymous>)
    at Function.install (node_modules/vue-apollo/dist/vue-apollo.esm.js:1978:0)
    at Function.Vue.use (/Users/lbombach/Bild/projects/delivery/vue-apollo-plugin-ssr-last/node_modules/vue/dist/vue.runtime.common.js:4749:22)
    at Module../src/vue-apollo.js (src/vue-apollo.js:9:4)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/main.js (main.js:3398:69)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module../src/entry-server.js (main.js:3317:63)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at main.js:118:18
    at Object.<anonymous> (main.js:121:10)
    at evaluateModule (/Users/lbombach/Bild/projects/delivery/vue-apollo-plugin-ssr-last/node_modules/vue-server-renderer/build.js:8349:21)
    at /Users/lbombach/Bild/projects/delivery/vue-apollo-plugin-ssr-last/node_modules/vue-server-renderer/build.js:8407:18
    at new Promise (<anonymous>)
    at /Users/lbombach/Bild/projects/delivery/vue-apollo-plugin-ssr-last/node_modules/vue-server-renderer/build.js:8399:14
    at Object.renderToString (/Users/lbombach/Bild/projects/delivery/vue-apollo-plugin-ssr-last/node_modules/vue-server-renderer/build.js:8575:9)

[LukasBombach]

I opened a PR https://github.com/Akryum/vue-apollo/pull/362

[Akryum]

This should be fixed in the upcoming completely refactored SSR system.