TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>) #822

cesalberca · 2018-07-13T10:08:41Z

Version

1.0.0-beta.20

Reproduction link

https://github.com/cesalberca/vue-test-utils-bug

Steps to reproduce

Update vue-test-utils to 1.0.0-beta.20 and run tests.

What is expected?

No errors.

What is actually happening?

Every test that uses localVue.use fails with the following error:

TypeError: Cannot read property 'installed' of undefined

I don't know if it's related but I can't use Vue.extend() in order to mount a directive in another Vue instance:

const ComponentClass = Vue.extend(LoadingLayer)

export const loadingDirective = Vue.directive('loading', {
  inserted(el: HTMLElement, binding: VNodeDirective) {
   ...
  }
}

If I move ComponentClass inside the directive (which won't work as expected) I still get cannot read extend of undefined.

I think Vue has a lot of potential, but if you guys want to get the attention of big companies I really think you should offer first class support with TypeScript –which is used a lot in big projects–, and I don't think right now that is achieved. Anyway, tell me anything that you need and I will offer all the help that is required and thank you for your time.

The text was updated successfully, but these errors were encountered:

eddyerburgh · 2018-07-14T08:00:44Z

You need to import default exports using namespace imports:

import * as VueRouter from "vue-router";

You would get the same error if you tried to call Vue.use with undefined.

We could improve the error handling in Vue and Vue Test Utils to warn that a plugin is undefined.

cesalberca · 2018-07-19T08:13:30Z

Sorry for not getting back to you sooner. I'm still having new problems. The ones with VueRouter seem to be fixed with the asterisk import (which I think is a little bit weird). However a bunch of new ones arise, these ones having to do with VeeValidate:

TypeError: this.validationErrors.has is not a function
at VueComponent.formErrorWrapperClass (src/components/form/FormError.vue:462:50)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at Watcher.evaluate (node_modules/vue/dist/vue.runtime.common.js:3247:21)
      at Proxy.computedGetter (node_modules/vue/dist/vue.runtime.common.js:3505:17)
      at Proxy.render (src/components/form/FormError.vue:477:33)
      at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.js:4542:22)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:21)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at init (node_modules/vue/dist/vue.runtime.common.js:4135:13)
      at createComponent (node_modules/vue/dist/vue.runtime.common.js:5606:9)
      at createElm (node_modules/vue/dist/vue.runtime.common.js:5553:9)
      at VueComponent.patch [as __patch__] (node_modules/vue/dist/vue.runtime.common.js:6089:7)
      at VueComponent.Vue._update (node_modules/vue/dist/vue.runtime.common.js:2658:19)
      at VueComponent.updateComponent (node_modules/vue/dist/vue.runtime.common.js:2786:10)
      at Watcher.get (node_modules/vue/dist/vue.runtime.common.js:3140:25)
      at new Watcher (node_modules/vue/dist/vue.runtime.common.js:3129:12)
      at mountComponent (node_modules/vue/dist/vue.runtime.common.js:2793:3)
      at VueComponent.Object.<anonymous>.Vue.$mount (node_modules/vue/dist/vue.runtime.common.js:7997:10)
      at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5940:21)
      at Object.it (src/components/form/__tests__/Checkbox.spec.ts:20:46)

This error I fixed it by adding in my setUp the following:

;(VueTestUtils.config.mocks as any)['validationErrors'] = () => {
  has: () => {}
}

However I get a similar error in another component:

[Vue warn]: Error in render: "TypeError: this.validationErrors.has is not a function"

    found in

    ---> <SdaAutocomplete>
           <GlobalProjectForm>
             <Root>

  console.error node_modules/vue/dist/vue.runtime.common.js:1739
    TypeError: this.validationErrors.has is not a function
        at VueComponent.dropdownClass (/Users/calberca/Workspace/sda-front/src/components/form/Dropdown.vue:2097:40)
        at Watcher.get (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at Watcher.evaluate (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3247:21)
        at Proxy.computedGetter (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3505:17)
        at Proxy.render (/Users/calberca/Workspace/sda-front/src/components/form/Dropdown.vue:2218:315)
        at VueComponent.Vue._render (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:4542:22)
        at VueComponent.updateComponent (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:2786:21)
        at Watcher.get (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3140:25)
        at Watcher.run (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:3217:22)
        at flushSchedulerQueue (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:2979:13)
        at Array.<anonymous> (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:1835:12)
        at flushCallbacks (/Users/calberca/Workspace/sda-front/node_modules/vue/dist/vue.runtime.common.js:1756:14)
        at process._tickCallback (internal/process/next_tick.js:68:7)

And I think It has to do when I use mount (shallowMount fails the test but the errors are not shown anymore). If I go all the way down to the SdaAutocomplete component extends from other component:

export default Dropdown.extend({
  name: 'SdaAutocomplete',
  extends: Dropdown,
  ...
})

Which I think it might have to do with this issue: logaretm/vee-validate#1267

eddyerburgh · 2018-07-21T16:12:14Z

I'm closing this issue since the original question is resolved. If you are still having problems veeValidate, please create a new issue with a reproduction

deraw · 2018-12-07T13:18:47Z

Hi! I'm having the same issue: TypeError: Cannot read property 'installed' of undefined

Whatever plugin I use I've got this message, I've tried to import it like you said: import * as VueRouter from 'vue-router';, but I'm using TypeScript ans it's not happy because the import type isn't PluginObject<any> | Pluginfunction<any>

This is very frustating! Do you have any idea or solution to this? Thanks!

eddyerburgh · 2018-12-07T16:51:24Z

Hi @Deraw- it's difficult to answer your question without a reproduction that I can run. It could be caused by multiple issues. If you are able to provide a reproduction, and you believe that it is a bug please open a new issue in this repo. If you don't think it's a bug but would like to understand what the issue is, please post a question on StackOverflow

deraw · 2018-12-10T13:28:08Z

Hi @eddyerburgh! Thanks for your response, I've created a repo that reproduce the issue and opened #1061!

eddyerburgh · 2018-12-10T15:55:38Z

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:

{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}

Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

deraw · 2018-12-10T16:41:47Z

@eddyerburgh Thank you for the quick answer, it worked!

AdrianHL · 2019-01-24T17:12:58Z

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:
{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}
Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

How can I define the compilerOptions?

deraw · 2019-01-24T17:29:54Z

@AdrianHL You define it in your tsconfig.json (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

AdrianHL · 2019-01-25T08:25:22Z

@AdrianHL You define it in your tsconfig.json (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)

I have created the tsconfig.json file in both, the project root folder and in the folder containing the test cases. Same error. Also tried to update the content of the file so it contains invalid data and there are no errors so I guess it is not loading it :(

This is how I run the tests

mocha-webpack --webpack-config=node_modules/laravel-mix/setup/webpack.config.js --require tests/Vue/setup.js tests/Vue/*.spec.js

Edit: Fixed by changing
import {VueLazyload} from 'vue-lazyload'
to
import VueLazyload from 'vue-lazyload'

aislanmaia · 2019-11-20T23:35:43Z

This is the same issue with importing in TypeScript. On solution is to turn on esModuleInterop in the tsconfig file:
{
  "compilerOptions": {
    "esModuleInterop": true
    // ..
  }
// ..
}
Take a look at this StackOverflow answer https://stackoverflow.com/a/43622363/4939630

I've already this esModuleInterop equals true, but I continue to receive the same error for Vuetify.

jimhucksly · 2021-02-16T06:50:57Z

I have a same error too, "esModuleInterop" is "true"

eddyerburgh added the question label Jul 14, 2018

eddyerburgh closed this as completed Jul 21, 2018

deraw mentioned this issue Dec 10, 2018

TypeError: Cannot read property 'installed' of undefined #1061

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>) #822

TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>) #822

cesalberca commented Jul 13, 2018

eddyerburgh commented Jul 14, 2018

cesalberca commented Jul 19, 2018

eddyerburgh commented Jul 21, 2018

deraw commented Dec 7, 2018

eddyerburgh commented Dec 7, 2018

deraw commented Dec 10, 2018

eddyerburgh commented Dec 10, 2018

deraw commented Dec 10, 2018

AdrianHL commented Jan 24, 2019

deraw commented Jan 24, 2019

AdrianHL commented Jan 25, 2019 •

edited

Loading

aislanmaia commented Nov 20, 2019

jimhucksly commented Feb 16, 2021

TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>) #822

TypeError: Cannot read property 'installed' of undefined when using localVue.use(<PLUGIN>) #822

Comments

cesalberca commented Jul 13, 2018

Version

Reproduction link

Steps to reproduce

What is expected?

What is actually happening?

eddyerburgh commented Jul 14, 2018

cesalberca commented Jul 19, 2018

eddyerburgh commented Jul 21, 2018

deraw commented Dec 7, 2018

eddyerburgh commented Dec 7, 2018

deraw commented Dec 10, 2018

eddyerburgh commented Dec 10, 2018

deraw commented Dec 10, 2018

AdrianHL commented Jan 24, 2019

deraw commented Jan 24, 2019

AdrianHL commented Jan 25, 2019 • edited Loading

aislanmaia commented Nov 20, 2019

jimhucksly commented Feb 16, 2021

AdrianHL commented Jan 25, 2019 •

edited

Loading