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 simple code and I tried to unit test with jest, but It have some error. Here is my test code.

///<reference path="../../../../node_modules/@types/jest/index.d.ts"/>
// https://vue-test-utils.vuejs.org/kr/s
import { mount } from "vue-test-utils";
import HelloWorld from './HelloWorld.vue';

describe('[HelloWorld]', function () {
  let cmp: any;

  beforeEach(() => {
    cmp = mount(HelloWorld);
  });

  it("Check vue instance", () => {
    expect(cmp.isVueInstance()).toBeTruthy();
  });

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

and Here is vue file

   <template>
   <div class="hello">
       <h1>{{ msg }}</h1>
       <img src="/assets/logo.png">
       <button @click="clickHandler">
         button
       </button>
     </div>
   </template>

   <script lang="ts">
   import 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);
     }
   }
   </script>

Here is error logs with picture.

I have the same problem TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf (<anonymous>) Apparently it is an issue with some circular references while the modules are resolved. Keep me posted if you find a solution. — Beau
– Beau, Commented Feb 27, 2018 at 21:07

Hoang Vu · Accepted Answer · 2018-07-20 13:34:52Z

7

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

edited Jul 20, 2018 at 13:34

answered Jul 20, 2018 at 11:46

Hoang Vu

911 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Reynicke · Accepted Answer · 2020-04-09 07:42:22Z

2

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 };

edited Apr 9, 2020 at 7:42

answered Apr 9, 2020 at 7:32

Reynicke

1,5882 gold badges14 silver badges24 bronze badges

Comments

Bassie · Accepted Answer · 2020-07-17 12:44:32Z

2

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

edited Jul 17, 2020 at 12:44

Bassie

10.5k10 gold badges88 silver badges190 bronze badges

answered Apr 5, 2018 at 7:19

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Comments

аlex · Accepted Answer · 2018-02-26 16:11:51Z

0

Not

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

Should be

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

answered Feb 26, 2018 at 16:11

аlex

5,7161 gold badge31 silver badges40 bronze badges

Comments

Александр Братко · Accepted Answer · 2020-03-31 08:02:48Z

0

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

answered Mar 31, 2020 at 8:02

Александр Братко

1112 silver badges5 bronze badges

Comments

B. K. · Accepted Answer · 2020-08-10 11:36:07Z

-1

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..!! :(

answered Aug 10, 2020 at 11:36

B. K.

517 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related