Open Nedaly opened 5 years ago
Maybe if you provide some hard details (ie., code) instead of just the error stack?
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
@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);
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.
@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
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
@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.
meteor-base@1.4.0 # Packages every Meteor app needs to have
mobile-experience@1.0.5 # Packages for a great mobile UX
mongo@1.6.0 # The database Meteor supports right now
blaze-html-templates@1.0.4 # Compile .html files into Meteor Blaze views
reactive-var@1.0.11 # Reactive variable for tracker
tracker@1.2.0 # Meteor's client-side reactive programming library
standard-minifier-css@1.5.2 # CSS minifier run for production mode
standard-minifier-js@2.4.0 # JS minifier run for production mode
es5-shim@4.8.0 # ECMAScript 5 compatibility for older browsers
ecmascript@0.12.3 # Enable ECMAScript2015+ syntax in app code
shell-server@0.4.0 # Server-side component of the `meteor shell` command
insecure@1.0.7 # 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!
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.
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
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?