Akryum/meteor-vue2-example

Install

Closed this issue · 11 comments

EMHmark7 commented

@Akryum , first, Happy end of this year & New Year!

Here is what I did to install this project. but it does not work. (empty browser):
(only the page name gets in on the tab). Maybe you have a better way to install it.

Other behaviour: If I add Hello! in <body> before the <app> tag, it displays shortly at top left corner a fraction of second, then disapears and is displayed about 2 lines billow and a bit indented to the right.
Nothing else appears.

If I copy my custom files from my previous project of version 1, it does not work, so I prefer to investigate first with your code only.

What I dit:
In Git Windows PowerShell: git clone git@github.com:Akryum/meteor-vue2-example.git
In DOS shell:

cd meteor-vue2-example
meteor-vue2-example>meteor npm install
meteor-vue2-example>meteor update --patch

meteor (app startup)

Your help would be very appreciated on this.

Thanks

Marc

EMHmark7 commented

@Akryum, not shure, but I do not see where you import MyButton in App.vue.
It is not in the imports folder.

Akryum commented

It's here. It works as explained in the documentation.

Do you still have an empty browser? If so, what is the browser console output?

EMHmark7 commented

Thanks for reply!

  1. About MyButton, I can find it in ui folder, but it is not explicitly imported in the code. So, I am surprised that it should work this way.

  2. Console says :
    [HMR] Dev client disconnected akryum_vue-component-dev-client.js:136
    You are running Vue in dev mode.
    Vue warn Error when rendering anonymous component modules.js:1203
    <unavailable> modules.js:1116
    ReferenceError: h is not defined app.js:154:71

In main.js, you refer to h in render: h =>h(app)
I suppose it is the alias of createElement as documented in vue doc
But I am not shure how to declare it or where it is declared.

Also, I suppose render: h =>h(app) refers to a syntax from a precompiler (Coffee or ES6,I do not know, I do not know if pure JS). Does the project include the right precompiler?

Marc

nizulzaim commented

You need to run meteor npm install --save vue@^2.1.6. Otherwise, it is not going to work.

EMHmark7 commented

Same behaviour.

In console:

Vue warn: Error rendering Anonymous component: moludles.js:1200
Uncaught ReferenceError: _h is not defined
    at Proxy.__vue_options__.render (app.js:154)
    at VueComponent.Vue._render (modules.js:3633)
    at VueComponent.<anonymous> (modules.js:2870)
    at Watcher.get (modules.js:2333)
    at new Watcher (modules.js:2325)
    at VueComponent.Vue._mount (modules.js:2869)
    at VueComponent.Vue$2.$mount (modules.js:6659)
    at init (modules.js:3181)
    at createComponent (modules.js:4733)
    at createElm (modules.js:4676)
modules.js:1114 TypeError: Cannot read property 'child' of null
    at isPatchable (modules.js:4792)
    at patchVnode (modules.js:5003)
    at Vue$2.patch [as __patch__] (modules.js:5132)
    at Vue$2.Vue._update (modules.js:2903)
    at Vue$2.<anonymous> (modules.js:2870)
    at Watcher.get (modules.js:2333)
    at Watcher.run (modules.js:2402)
    at flushSchedulerQueue (modules.js:2220)
    at Array.<anonymous> (modules.js:1152)
    at nextTickHandler (modules.js:1101)
logError @ modules.js:1114
[HMR] Dev client connected     akryum_vue-component-dev-client.js:133
Akryum commented

I updated the packages to vue 2.1.8, let me know if it's better.

Akryum commented

@marcte

About MyButton, I can find it in ui folder, but it is not explicitly imported in the code. So, I am surprised that it should work this way.

As explained in the doc, if you put a .vue file outside of imports, it will automatically register it as a global component.

Deleted user commented

Strange. Before you bumped a version, the project didn't work properly in Vue versions higher than 2.1.6. Meteor helper in the chat component was giving undefined as if it wasn't finding anything. What's more, code based on this project resulted with similar issue on my private projects too, until I explicitly set the Vue version to 2.1.6. Now you just bump it and it works again.

Was the messages: [] in data() the solution?

Akryum commented

I don't know. I didn't have any error before.

EMHmark7 commented

Sorry for delay, Got internet problem all day long, nobody was on duty at the ISP!

I reinstalled the project and it works now!
It would be nice to know, besides having an updated project, how to update it if comes a new Vue version or other.

I do not know NPM enough to understand things, such as things discussed on this topic: Vue forum
such as when to manually modify package.json or when add --save.

Now I will try to make d3 run on that.

Thanks for the help.
You made my year (the ending one and hopefully my new one and your new one. Happy New Year!

What I dit:
In Git Windows PowerShell: git clone git@github.com:Akryum/meteor-vue2-example.git
In DOS shell:

cd meteor-vue2-example
meteor-vue2-example>meteor npm install
meteor-vue2-example>meteor update --patch        (it said it was already up to date)
Akryum commented

Thanks, happy New Year too! 🎉
The --save flag in the npm install --save vue@^2.1.8 command will tell npm to update the version string in the package.json for you. For example, when vue 2.2.0 will be released, update meteor with meteor update to check for potential updates to my vue/meteor packages, and use meteor npm install --save vue@^2.2.0 (here we add meteor to use the meteor version of npm, and ^ in the version number to allow the update/installation of newer minor versions starting from 2.2.0).