After upgrade to 1.8.2: Uncaught TypeError: _Vue.component is not a function

help
1

I get this error in console log and a blank screen no error i terminal

Uncaught TypeError: _Vue.component is not a function
    at MyButtons.vue (MyButtons.vue:8)
    at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
    at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
    at require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268)
    at app.js?hash=76f32cd248cfb23daa6d33c56b29698f854b2a0d:4019

I have tried:
Meteor update
Npm update
Meteor reset
Restarted computer

I have been checking https://github.com/meteor/meteor/blob/devel/History.md#v182-2019-11-14

Have i forgot to delete og update some dependencies? or is there a new way to structure files and folders?

2

I’ve just tried updating my Vue project to Meteor 1.8.2 and do not experience this problem.

Did you remember meteor npm install @babel/runtime@latest ?

Edit: Came across this bug report though: https://github.com/meteor-vue/vue-meteor/issues/364

3

Hi,

I have seen it, when i use this https://github.com/meteor-vue/vue-meteor-demo and update it to 1.8.2 there is no problem, it is something in my packages or the manner I include vue

This dont work:

meteor package

# 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
reactive-var@1.0.11            # Reactive variable for tracker
jquery@1.11.10                  # Helpful client-side library
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.0    # JS minifier run for production mode
es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.13.0              # Enable ECMAScript2015+ syntax in app code

# insecure@1.0.7                # Allow all DB writes from clients (for prototyping)
# static-html@1.1.12           # dont use because of blaze template
akryum:vue
akryum:vue-component
session@1.2.0
shell-server@0.4.0
# stylus@=2.513.14
dynamic-import@0.5.1
akryum:vue-stylus
planettraining:material-design-icons-font
polyroid:font-roboto
accounts-base@1.4.5
accounts-password@1.5.2
accounts-ui@1.3.1
blaze-html-templates
# useraccounts:core
# useraccounts:unstyled
akryum:vue-blaze-template
# accounts-google
underscore@1.0.10
akryum:vue-router2@=0.2.0
meteorhacks:aggregate

npm packages

{
  "dependencies": {
    "@babel/parser": "^7.7.5", 
    "@babel/runtime": "^7.7.6",
    "bcrypt": "^3.0.6",
    "cloudinary": "^1.14.0",
    "core-js": "^3.4.7",
    "lodash": "^4.17.15",
    "meteor-node-stubs": "^1.0.0",
    "reify": "^0.20.12",
    "vue": "^2.6.10",
    "vue-meteor-tracker": "^1.2.3",
    "vue-moment": "^4.0.0",
    "vue-router": "^3.0.2",
    "vuetify": "^1.5.7",
    "vuetrend": "^0.3.2"
  },
  "devDependencies": {
    "eslint": "^4.18.0",
    "eslint-plugin-vue": "^4.7.1",
    "vue-clicky": "^1.3.5",
    "webpack": "^3.12.0"
  }
}

main.js

// Libs
import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';
import routerFactory from '/imports/routes.js';
import VueMeteorTracker from 'vue-meteor-tracker'

const moment = require('moment')
require('moment/locale/da')

Vue.use(require('vue-moment'), {
  moment
})




Vue.use(VueMeteorTracker)

import Trend from 'vuetrend';
Vue.use(Trend);

require('../node_modules/vuetify/dist/vuetify.min.css')
require('../node_modules/vuetify/dist/vuetify.min.js')

// App layout
import AppLayout from '/imports/ui/AppLayout.vue';

// App start
Meteor.startup(() => {
  // Start the router
  const router = routerFactory.create();
  new Vue({
    router,
    render: h => h(AppLayout),
  }).$mount('app');
});
4

I’m not sure that is the correct way to import Vuetify. This works for me:

 // https://vuetifyjs.com/en/getting-started/quick-start#existing-applications
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify, {
	iconfont: 'mdi',
});

Also, instead of this:

import {Meteor} from 'meteor/meteor';
import {Vue} from 'meteor/akryum:vue';

Try: "meteor remove akryum:vue" since you already have it as an npm module, then:

// no need to import Meteor
import Vue from 'vue';

Also, is there any reason you have locked akryum:vue-router2 to @=0.2.0 in .meteor/packages? I use the latest quite happily,

Also, I highly reccommend akryum:vue-pug - once you’ve started writing Vue templates in pug all your old html templates will look ugly and verbose :wink: Plus it generates slightly smaller template render functions because all superfluous white space is removed.

If you ever need to upgrade to Vuetify 2 then see here: How to install vuetify with meteor - #8 by wildhart - Vue Forum. I tried upgrading but quickly rolled back to 1.5.7 because all components pretty much need to be rewritten.

5

I think you should also take another look at this comment on the the bug report.

Looks like this is only a problem when components are automatically registered by being in the client folder (which mine aren’t, hence I was OK). If you move them into the imports folder and manually import them then you should be OK. Another benefit of moving them into the imports folder is SSR check this out :wink:

Alternatively you could try the forked package as mentioned in that github comment.

6

Thanks @wildhart I will try it out. I hope it works, I have two other projects that needs the same remake if it works

7

Were you successful in resolving this?

I’m encountering the same problem after updating a project

Also getting this message in console (not sure if related):

The version of @babel/runtime installed in your node_modules directory 
(7.7.0) contains a breaking change which was introduced by 
https://github.com/babel/babel/pull/8266. Please either downgrade by 
running the following command:

  meteor npm install --save-exact @babel/runtime@7.0.0-beta.55

or update to the latest beta version of Meteor 1.7.1, as explained in 
this pull request: https://github.com/meteor/meteor/pull/9942.
8

I didn’t have time yet to try it out

9

Now I get this error:

Uncaught TypeError: module.watch is not a function
    at main.routes.js (main.routes.js:1)
    at fileEvaluate (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:346)
    at Module.require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:248)
    at require (modules-runtime.js?hash=23fe92393aa44a7b01bb53a510a9cab5fb43037c:268)
    at app.js?hash=4360dd5964ba25adb1f1dcd0a36e2fa0c8cc1222:3988

and

modules.js?hash=50438de3312b9a230634659f3f1d233a7e9e3531:27599 [Vue warn]: Cannot find element: app
warn @ modules.js?hash=50438de3312b9a230634659f3f1d233a7e9e3531:27599

meteor-vue-vuetify
meteor-vue-vuetify681×793 50.7 KB

What did I forget to change?

1 Like
10

put your App.vue into the imports foldder it will work good.
Move your files in an imports directory and import them manually

11

I can’t find a app.vue file

My .vue files are in import -< UI

1 Like
12

when l do these,my project can run normally.
you must has a foldder ，it is name is imports

image
image398×620 21.5 KB
image
image1346×573 66.9 KB

13

This error is now fixed if you run meteor update and you are using akryum:vue-component https://atmospherejs.com/akryum/vue-component @akryum updated this to 0.15.2 on Dec. 27th.

1 Like
14

It work when I used this router way https://github.com/Hernanm0g/meteor_vuetify/blob/master/imports/routes.js