Vue + typescript - TypeError：对象原型可能只是一个对象或空：未定义

Posted 2023-02-22

【中文标题】Vue + typescript - TypeError：对象原型可能只是一个对象或空：未定义

【英文标题】：Vue + typescript - TypeError: Object prototype may only be an Object or null: undefined

【发布时间】：2018-08-06 03:10:26

【问题描述】：

TypeError: Object 原型可能只是一个 Object 或 null: undefined

我的项目出现了一些错误。 我正在使用 vuejs、typescript 和 jest。

这只是简单的代码，我尝试用 jest 进行单元测试，但它有一些错误。这是我的测试代码。

///<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!!');
  );
);

这是vue文件

   <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.

【问题讨论】：

我也有同样的问题TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf (<anonymous>) 显然这是解决模块时一些循环引用的问题。如果您找到解决方案，请随时通知我。

【参考方案1】：

你应该为你的tsconfig.json 设置esModuleInterop = true 或者你自己的tsconfig 只是为了jest

【参考方案2】：

问题似乎是Vue2如何暴露自己，所以import Vue from "vue"导致了这个错误。

我通过像这样使用“vue-property-decorator”来修复它：

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

那么“vue-property-decorator”是做什么的？它导入然后导出 Vue 不是默认的，而是命名为 export。如果你愿意，我想你可以在自己的代码中做到这一点。

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

【参考方案3】：

对我来说，使用 import * as Vue from "vue" 而不是 import Vue from "vue" 解决了我的项目的问题，我的项目具有类似的设置，即：

//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);
  

它要麻烦得多，但至少它有效。我已经使用 vue-cli 设置了一个概念验证示例：https://codesandbox.io/s/mjvjw2xw39

【参考方案4】：

没有

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

应该是

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

【参考方案5】：

我通过从标签中删除 lang="ts" 解决了这个问题

【参考方案6】：

查看下面的此链接，它确实帮助我解决了该命令的循环依赖问题 npx madge --circular --extensions ts ./

链接： To Detect Circular Dependency in you package

尽管如此，我仍然收到错误..!! :(