TypeError: Cannot redefine property: $subReady

[Nedaly]

trafficstars

I am receiving the following TypeError: Cannot redefine property: $subReady

The error stack is:

at Function.defineProperty () at VueComponent.firstPrepare (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:43927) at callHook (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:30503) at VueComponent.Vue._init (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:32208) at new VueComponent (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:32380) at createComponentInstanceForVnode (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:31892) at init (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:31713) at createComponent (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:33190) at createElm (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:33137) at VueComponent.patch [as patch] (modules.js?hash=efa19dc1a6f0d0ead424b960075ceae573106eab:33673)

It seems like the package is trying to redefine an already existing Object.property while preparing the vue instance for rendering.

Any ideas how to prevent this error?

[hluz]

Maybe if you provide some hard details (ie., code) instead of just the error stack?

[nrlewis]

I'm also seeing this problem when I try to import the Veutify library and call Vue.use(Veutify)

Relevant code in main.js for client: /client/main.js

import './main.html';

import { Meteor } from 'meteor/meteor';
import Vue from 'vue';
import VueMeteorTracker from 'vue-meteor-tracker';
import Vuetify from 'vuetify';
import VueRouter from 'vue-router';
import App from '../imports/ui/App.vue';
import routes from '../imports/routes';

/* Plugins */
Vue.use(VueMeteorTracker);
Vue.use(VueRouter);
Vue.config.meteor.freeze = true;
Vue.use(Vuetify);

function createApp () {
  const router = new VueRouter({
    mode: 'history',
    routes,
  });


  return {
    app: new Vue({
      el: '#app',
      router,
      ...App,
    }),
    router,
  };
}


Meteor.startup(() => createApp());

And here is my App.vue (I'm still using the vue example posted in the meteor docs: /imports/ui/App.vue

<template>
  <div>
    <div v-if="!$subReady.Time">Loading...</div>
    <div v-else>
      <p>Hello {{hello}},
        <br>The time is now: {{currentTime}}
      </p>
      <button @click="updateTime">Update Time</button>
      <p>Startup times:</p>
      <ul>
        <li v-for="t in TimeCursor">
          {{t.time}}  -  {{t._id}}
        </li>
      </ul>
      <p>Meteor settings</p>
      <pre><code>
        {{settings}}
      </code></pre>
    </div>
  </div>
</template>

<script>
import Time from '/imports/api/time/collections';

export default {
  data() {
    console.log('Sending non-Meteor data to Vue component');
    return {
      hello: 'World',
      settings: Meteor.settings.public,   // not Meteor reactive
    }
  },
  // Vue Methods
  methods: {  
    updateTime() {
      console.log('Calling Meteor Method UpdateTime');
      Meteor.call('UpdateTime');          // not Meteor reactive
    }
  },
  // Meteor reactivity
  meteor: {
    // Subscriptions - Errors not reported spelling and capitalization.
    $subscribe: {
      'Time': []
    },
    // A helper function to get the current time
    currentTime () {
      console.log('Calculating currentTime');
      var t = Time.findOne('currentTime') || {};
      return t.time;
    },
    // A Minimongo cursor on the Time collection is added to the Vue instance
    TimeCursor () {
      // Here you can use Meteor reactive sources like cursors or reactive vars
      // as you would in a Blaze template helper
      return Time.find({}, {
        sort: {time: -1}
      })
    },
  }
}
</script>

<style scoped>
  p {
    font-size: 2em;
  }
</style>

Error output in client (but not shutting down server, code still works from what I can see):

[Vue warn]: Error in beforeCreate hook: "TypeError: Cannot redefine property: $subReady"

(found in <Root>)
warn @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:1746
logError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2960
globalHandleError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2955
handleError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2944
callHook @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:4172
Vue._init @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5863
Vue @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5964
install @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:28458
Vue.use @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986
install @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:30202
Vue.use @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986
main.js @ main.js:15
fileEvaluate @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268
(anonymous) @ app.js?hash=521fa02bad84662459505d22a9029855e0947d7f:239
modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2964 TypeError: Cannot redefine property: $subReady
    at Function.defineProperty (<anonymous>)
    at Vue.firstPrepare (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:11024)
    at callHook (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:4170)
    at Vue._init (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5863)
    at new Vue (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5964)
    at Object.install (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:28458)
    at Function.Vue.use (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986)
    at Object.install (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:30202)
    at Function.Vue.use (modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986)
    at main.js (main.js:15)
logError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2964
globalHandleError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2955
handleError @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:2944
callHook @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:4172
Vue._init @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5863
Vue @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5964
install @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:28458
Vue.use @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986
install @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:30202
Vue.use @ modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:5986
main.js @ main.js:15
fileEvaluate @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268
(anonymous) @ app.js?hash=521fa02bad84662459505d22a9029855e0947d7f:239
App.vue:48 Sending non-Meteor data to Vue component
App.vue:77 Calculating currentTime
App.vue:77 Calculating currentTime
modules.js?hash=a7de821e674f7680371071be3f487f788c560baf:9248 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
App.vue:77 Calculating currentTime

[hluz]

@nrlewis, I think VueMeteorTracker does not have to be loaded as a plug-in... Can you try to remove:

import VueMeteorTracker from 'vue-meteor-tracker';

and

Vue.use(VueMeteorTracker);

[nrlewis]

HI @hluz , thank you for your response. I In the Vue-Meteor documentation, it explicitly loads a plugin: https://guide.meteor.com/vue.html#vue-and-meteor-realtime-data-layer

tried commenting out the lines above as you suggested, however, now I'm getting an undefined warning. Any ideas from the error below?

 Property or method "$subReady" 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.

[hluz]

@nrlewis , you only need to add as a plugin if you didn't use the Meteor akryum:vue package . It is mentioned as a note in the instructions: https://github.com/meteor-vue/vue-meteor-tracker#installation

[tomasinouk]

Hi guys, just stumbled on this via google. Had same issue and it turns out that I had Vue twice.

one in package.json

"dependencies": {
"vue": "2.5.21",
}

and second in .meteor/packages

akryum:vue
akryum:vue-component
akryum:vue-ssr

commented out akryum:vue so just left the vue installed via meteor npm i vue and do not have the

TypeError: Cannot redefine property: $subReady

any more.

Hope that helps

[nrlewis]

@hluz and @tomasinouk, thank you for your responses... I did have the akryum:vue-component library loaded into .meteor/packages, however, once I removed it, I can no long import *.vue files as they are not found for some reason:

cat package.json | jq .dependencies

{
  "@babel/runtime": "^7.1.5",
  "meteor-node-stubs": "^0.4.1",
  "moment": "^2.23.0",
  "vue-meteor-tracker": "^2.0.0-beta.5",
  "vue-router": "^3.0.2",
  "vuetify": "^1.4.0",
  "vuex": "^3.0.1",
  "vue": "^1.0.24"
}

cat .meteor/packages

# Meteor packages used by this project, one per line.
# Check this file (and the other files in this directory) into your repository.
#
# 'meteor add' and 'meteor remove' will edit this file for you,
# but you can also edit it by hand.

[email protected]             # Packages every Meteor app needs to have
[email protected]       # Packages for a great mobile UX
[email protected]                   # The database Meteor supports right now
[email protected] # Compile .html files into Meteor Blaze views
[email protected]            # Reactive variable for tracker
[email protected]                 # Meteor's client-side reactive programming library

[email protected]   # CSS minifier run for production mode
[email protected]    # JS minifier run for production mode
[email protected]                # ECMAScript 5 compatibility for older browsers
[email protected]              # Enable ECMAScript2015+ syntax in app code
[email protected]            # Server-side component of the `meteor shell` command

[email protected]                # Allow all DB writes from clients (for prototyping)

cat client/main.js

import './main.html';

import { Meteor } from 'meteor/meteor';
import Vue from 'vue';
import VueMeteorTracker from 'vue-meteor-tracker';
import Vuetify from 'vuetify';
import App from '../imports/ui/App';

/* Plugins */
Vue.use(VueMeteorTracker);
Vue.use(Vuetify);


Meteor.startup(() => {
  new Vue({
    el: '#app',
    ...App,
  });
});

App.vue is same as above :/

console out:

Uncaught Error: Cannot find module '../imports/ui/App'
    at makeMissingError (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:232)
    at Module.require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:251)
    at Module.moduleLink [as link] (modules.js?hash=7b73cee3136191f613c8cf9fd736698802d8156d:298)
    at main.js (main.js:1)
    at fileEvaluate (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346)
    at Module.require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248)
    at require (modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268)
    at app.js?hash=cd560c9b70878ffa4487c88d76cde3187a670383:98
makeMissingError @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:232
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:251
moduleLink @ modules.js?hash=7b73cee3136191f613c8cf9fd736698802d8156d:298
main.js @ main.js:1
fileEvaluate @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:346
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:248
require @ modules-runtime.js?hash=d3c3e5d67c95f97a60888bda7373292efad3be5e:268
(anonymous) @ app.js?hash=cd560c9b70878ffa4487c88d76cde3187a670383:98

I tried using only akryum:vue instead of the vue from npm, however, vuetify requires vue in npm, is there something obvious that I'm missing?

Thank you!

[hluz]

I use...

.meteor/packages

akryum:vue
akryum:vue-component

package.json

    "vue-meteor-tracker": "^2.0.0-beta.4",
    "vue-router": "^3.0.1",
    "vue": "^2.5.17",
    "vuetify": "^1.3.7",

... without any issues. No need to import / load vue-meteor-tracker as a plugin.

[bastiW]

I had the same issue.

My underlying issue was that I had my

Vue.use('PluginName') inside the client folder

so I moved it to the imports/ui/app.js where I have the createApp function

This fixed the issue