Vue + typescript - TypeError: Object prototype may only be an Object or null: undefined

Question

TypeError: Object prototype may only be an Object or null: undefined

I got some error in my project. I\'m using vuejs, typescript and jest.

It\'s just simp

Answer 1

I solved the problem by removing lang="ts" from tag

Answer 2

You should set esModuleInterop = true for your tsconfig.json or your own tsconfig just for jest

Answer 3

For me, using import * as Vue from "vue" instead of import Vue from "vue" fixed the problem for my projects with a similar setup, i.e.:

//import Vue from "vue";
import * as Vue from "vue";
import Component from "vue-class-component";

interface HelloWorldInterface {
  msg: string;
  clickHandler(): void;
}

@Component
export default class HelloWorld extends Vue implements HelloWorldInterface {
  msg = "Hello!!";
  clickHandler() {
    window.alert(this.msg);
  }
}

It is a lot more cumbersome, but at least it works. I have setup a proof-of-concept example using vue-cli: https://codesandbox.io/s/mjvjw2xw39

Answer 4

The problem seems to be how Vue2 exposes itself, so import Vue from "vue" causes this error.

I fixed it by using 'vue-property-decorator' like this:

import { Vue, Component, Prop } from 'vue-property-decorator';

So what does 'vue-property-decorator' do? It imports and then exports Vue not as default but named export. I guess you could do that in your own code, if you wanted.

import Vue, { PropOptions, WatchOptions } from 'vue';
...
export { Component, Vue, mixins as Mixins };

Answer 5

Not

 it("message is Hello", () => {
    expect(cmp.vm.msg).toEqual('Hello!!');
  });

Should be

it("message is Hello", () => {
    expect(cmp.msg).toEqual('Hello!!');
  });

Answer 6

Checkout this link below, it really helped me resolve CIRCULAR DEPENDENCY issue with the command npx madge --circular --extensions ts ./

Link: To Detect Circular Dependency in you package

Neverthless I'm still getting the Error..!! :(