Giters

meteor-vue / vue-meteor

🌠 Vue first-class integration in Meteor

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Meteor tool 1.8.3, cannot run basic example from meteor manual

richard-fairthorne opened this issue · comments

commented

Running the basic example from the meteor 1.8 manual ( https://guide.meteor.com/vue.html#integrating-vue-with-meteor ) results in an error.

Safari:
Screen Shot 2019-12-20 at 10 40 05 AM

Chrome:
Screen Shot 2019-12-20 at 11 28 16 AM

A new directory was created and the example was followed to the letter. (by cut and paste)

I get the same result starting with a default meteor project, and a bare meteor project.

client/main.js

import Vue from 'vue';
import App from './App.vue';
import './main.html';

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

client/main.html:

<body>
  <div id="app"></div>
</body>

client/App.vue

<template>
  <div>
    <p>This is a Vue component and below is the current date:<br />{{date}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: new Date(),
    };
  }
}
</script>

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

package.json

{
  "name": "124-debug",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.6",
    "jquery": "^3.4.1",
    "meteor-node-stubs": "^1.0.0",
    "vue": "2.6.11"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}

.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.7.0                   # The database Meteor supports right now
blaze-html-templates    # Compile .html files into Meteor Blaze views
jquery                  # Wrapper package for npm-installed jquery
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.4   # CSS minifier run for production mode
standard-minifier-js@2.5.2    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
ecmascript@0.13.2              # Enable ECMAScript2015+ syntax in app code
typescript@3.7.1              # Enable TypeScript syntax in .ts and .tsx modules
shell-server@0.4.0            # Server-side component of the `meteor shell` command

autopublish@1.0.7             # Publish all data to the clients (for prototyping)
insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
akryum:vue-component

Meteor package versions:

akryum:vue-component@0.15.1
akryum:vue-component-dev-client@0.4.7
akryum:vue-component-dev-server@0.1.4
allow-deny@1.1.0
autopublish@1.0.7
autoupdate@1.6.0
babel-compiler@7.4.2
babel-runtime@1.4.0
base64@1.0.12
binary-heap@1.0.11
blaze@2.3.4
blaze-html-templates@1.1.2
blaze-tools@1.0.10
boilerplate-generator@1.6.0
caching-compiler@1.2.1
caching-html-compiler@1.1.3
callback-hook@1.2.0
check@1.3.1
ddp@1.4.0
ddp-client@2.3.3
ddp-common@1.4.0
ddp-server@2.3.0
deps@1.0.12
diff-sequence@1.1.1
dynamic-import@0.5.1
ecmascript@0.13.2
ecmascript-runtime@0.7.0
ecmascript-runtime-client@0.9.0
ecmascript-runtime-server@0.8.0
ejson@1.1.1
es5-shim@4.8.0
fetch@0.1.1
geojson-utils@1.0.10
hot-code-push@1.0.4
html-tools@1.0.11
htmljs@1.0.11
id-map@1.1.0
insecure@1.0.7
inter-process-messaging@0.1.0
jquery@3.0.0
launch-screen@1.1.1
livedata@1.0.18
logging@1.1.20
meteor@1.9.3
meteor-base@1.4.0
minifier-css@1.4.3
minifier-js@2.5.1
minimongo@1.4.5
mobile-experience@1.0.5
mobile-status-bar@1.0.14
modern-browsers@0.1.4
modules@0.14.0
modules-runtime@0.11.0
mongo@1.7.0
mongo-decimal@0.1.1
mongo-dev-server@1.1.0
mongo-id@1.0.7
npm-mongo@3.2.0
observe-sequence@1.0.16
ordered-dict@1.1.0
promise@0.11.2
random@1.1.0
reactive-var@1.0.11
reload@1.3.0
retry@1.1.0
routepolicy@1.1.0
shell-server@0.4.0
socket-stream-client@0.2.2
spacebars@1.0.15
spacebars-compiler@1.1.3
standard-minifier-css@1.5.4
standard-minifier-js@2.5.2
templating@1.3.2
templating-compiler@1.3.3
templating-runtime@1.3.2
templating-tools@1.1.2
tracker@1.2.0
typescript@3.7.1
ui@1.0.13
underscore@1.0.10
webapp@1.7.5
webapp-hashing@1.0.9

software versions:
Screen Shot 2019-12-20 at 11 31 05 AM

I am eager for a solve. Please let me know anything I can try or do to help isolate the issue.

commented

It may be worthy of note that projects created with previous versions of meteor seem to work fine, even after being upgraded to 1.8.3.

commented

I have created a repository containing the non-working code: https://github.com/richard-fairthorne/bugproof-meteor-vue-component-1

commented

Hi @richard-fairthorne , this issue showed up with the 1.8.2+ releases. If you want to follow the Vue tutorial for now, you'll need to use meteor 1.8.1, I have a large app built with Meteor + Vue and 1.8.2 caused a new issue. The issue has been identified here, but the fix has not been released yet: #380

commented

This should be fixed in the new version of vue-component