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

Question

Below if I import Entity I get the posts's subject error (TypeError: Object prototype may only be an Object or null: undefined), but if I replace the import with the actual Entity declaration the code runs fine.

Stackblitz demo here .

This is Customer.ts in the form that produces the error when I run the code with ts-node :

index.ts

export { Customer } from "./Customer";
export { Entity } from "./Entity";

Customer.ts

import { Entity } from "./index";

export class Customer extends Entity {
  sku: string;
  constructor(po: any) {
    super();
    this.sku = po.sku;
  }
}

Entity.ts

export abstract class Entity {
  id?: string;
}    

Run.ts (The test code)

import {Customer} from "./";

let c = new Customer({
  name: "Bob"
});
console.log(c);

If I replace the Entity import with the declaration like this:

export abstract class Entity {
  id?: string;
}    

export class Customer extends Entity {
  sku: string;
  constructor(po: any) {
    super();
    this.sku = po.sku;
  }
}

Then Run.ts logs this:

Customer { sku: undefined }

In other words it runs fine and produces no errors. Thoughts?

Answer 1

As I suspected, your original program has circular imports. Run.ts imports index.ts , which imports Customer.ts , which imports index.ts again. Since index.ts is already in the process of loading and itself depends on Customer.ts , the import { Entity } from "./index"; just binds the Entity of index.ts (which is not set yet) to the Entity of Customer.ts , and execution proceeds even though index.ts isn't finished loading. Then Entity is undefined at the time you try to extend it. You might argue that a circular import should be an error or that JavaScript engines should use some other algorithm that correctly handles your scenario; I'm not qualified to comment on why the current design was chosen. (Others feel free to add information about this.)

As you saw, changing Customer.ts to import from ./Entity directly instead of ./index breaks the cycle, and everything works as expected. Another solution would be to reverse the order of imports in index.ts .

Answer 2

This is not directly an answer to the example above, but I got the same error message when I had Vue and Parcel, and this kind of code:

class Proxy {}

class MyProxy extends Proxy {}

After some lengthy debugging, it turned out that there seems to be some class name conflict with the name "Proxy", maybe from Parcel. After I renamed the super class as "AbstractProxy" or anything else than "Proxy", it started to work.

Answer 3

你可以试试这个命令并检查应用程序：

1. ng update @angular/cli @angular/core --force
2. npm install
3. ng serve -o