Uncaught TypeError: plugin.apply is not a function When Running Karma unit test

[achen224]

Hello,

I've installed the plugin with npm and imported it in my router

Code:

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
Vue.use(Router)
Vue.use(Meta)

after this, Karma unit test throw error

Error:

17 11 2016 16:17:25.621:INFO [karma]: Karma v1.3.0 server started at http://localhost:9876/
17 11 2016 16:17:25.625:INFO [launcher]: Launching browser Chrome with unlimited concurrency
17 11 2016 16:17:25.632:INFO [launcher]: Starting browser Chrome
17 11 2016 16:17:26.819:INFO [Chrome 54.0.2840 (Mac OS X 10.12.1)]: Connected on socket /#Dan5pkY-wXijHOQSAAAA with id 65822028
Chrome 54.0.2840 (Mac OS X 10.12.1) ERROR
  Uncaught TypeError: plugin.apply is not a function
  at index.js:3310

Chrome 54.0.2840 (Mac OS X 10.12.1): Executed 0 of 0 ERROR (0.539 secs / 0 secs)

Any idea?

Thank's :)

[zspecza]

Hi @achen224 - thanks for the report.

I've tried reproducing your issue but it works for me. Could you perhaps provide more info? e.g. the line in your source file causing the issue + webpack config (if any)

[lijiakof]

I use it base on vue 2.0.5，and has the same error.Uncaught TypeError: plugin.apply is not a function(…) vue.common.js:3219

[zspecza]

@lijiakof are you passing any options to vue-meta? can I see some code that depicts how you're using vue-meta? would be a big help 👷

@atinux have you run into this, by any chance?

[atinux]

@declandewet @lijiakof I had the same error with nuxt.js when using vue-meta 👷

It's because of jsnext, it was fixed by importing vue-meta this way:

import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib

I believe it is because on the jsnext import (trough Webpack), Vue does not check the plugin.install.default here: https://github.com/vuejs/vue/blob/dev/dist/vue.common.js#L3219

[zspecza]

Thanks @atinux - I will look into a fix for this shortly

[achen224]

Hey @declandewet thx for reply.

my project base on vue2+vue-router+vuex with SSR bundle by webpack 2.0

i find some intristing...and everything ok... but maybe it's not good
below is my change

before :

App.js

import Vue from 'vue'
import App from '../component/App.vue'
import router from '../router'
import store from '../store'
import { sync } from 'vuex-router-sync'
import * as filter from '../filter'
Object.keys(filter).forEach(key => {
  Vue.filter(key, filter[key])
})
const app = new Vue({
  router,
  store,
  ...App
})
sync(store, router)
export { app, router, store }

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'
Vue.use(Router)
Vue.use(Meta)
export default new Router({
  mode: 'history',
  /* istanbul ignore next */
  scrollBehavior: () => ({ y: 0 }),
  routes: [
    { path: '/', component: Index },
    { path: '*', redirect: '/' }
  ]
})

after:

App.js

import Vue from 'vue'
import Meta from 'vue-meta'
Vue.use(Meta)
.
.
.

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
.
.
.

[zspecza]

Definitely a module resolution problem then - I'll investigate how the ES2015 build (https://github.com/declandewet/vue-meta/blob/7da1a5a72a75926eb431d5cebea30cdad6a715d9/package.json#L60) is compiled

thanks @achen224

[zspecza]

For now, you can use this workaround:

import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib

[achen224]

thanks @declandewet @atinux

import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib

is better solution for now