javascript - TypeError: Class extends value undefined is not a function or null

Question

尝试创建这些实体时出现以下错误。

TypeError: Class extends value undefined is not a function or null

我假设这与循环依赖有关，但是在使用表继承和一对多关系时应该如何避免呢？

它抱怨以下 javascript 在BaseComic_1.BaseComic.

let Variant = class Variant extends BaseComic_1.BaseComic {

这是完整的文件。

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
const typeorm_1 = require("typeorm");
const Comic_1 = require("./Comic");
const BaseComic_1 = require("./BaseComic");
let Variant = class Variant extends BaseComic_1.BaseComic {
};
__decorate([
    typeorm_1.ManyToOne(type => Comic_1.Comic, comic => comic.variants),
    __metadata("design:type", Comic_1.Comic)
], Variant.prototype, "comic", void 0);
Variant = __decorate([
    typeorm_1.ClassEntityChild()
], Variant);
exports.Variant = Variant;
//# sourceMappingURL=Variant.js.map

import {Entity, Column, PrimaryGeneratedColumn, OneToMany} from "typeorm";
import {Comic} from "./Comic";

@Entity()
export class Series {

    @PrimaryGeneratedColumn()
    public id: number;

    @Column("text", {
        length: 30
    })
    public copyright: string;

    @Column("text", {
        length: 100
    })
    public attributionText: string;

    @Column("text", {
        length: 150
    })
    public attributionHTML: string;

    @Column("text", {
        length: 50
    })
    public etag: string;

    @Column("text", {
        length: 200
    })
    public title: string;

    @Column("text")
    public description: string;

    @Column("number", {
        length: 4
    })
    public startYear: number;

    @Column("number", {
        length: 4
    })
    public endYear: number;

    @Column("text", {
        length: 20
    })
    public rating: string;

    @Column("text", {
        length: 20
    })
    public type: string;

    @Column("text")
    public thumbnail: string;

    @OneToMany(type => Comic, comic => comic.series)
    public comics: Array<Comic>;
}

import {Entity, TableInheritance, PrimaryGeneratedColumn, Column, ManyToOne, DiscriminatorColumn} from "typeorm";
import {Series} from "./Series";

@Entity()
@TableInheritance("class-table")
@DiscriminatorColumn({ name: "type", type: "string"})
export class BaseComic {

    @PrimaryGeneratedColumn()
    public id: number;

    @Column("text", {
        length: 30
    })
    public copyright: string;

    @Column("text", {
        length: 100
    })
    public attributionText: string;

    @Column("text", {
        length: 150
    })
    public attributionHTML: string;

    @Column("text", {
        length: 50
    })
    public etag: string;

    @Column("text", {
        length: 200
    })
    public title: string;

    @Column("int")
    public issue: number;

    @Column("text")
    public variantDescription: string;

    @Column("boolean")
    public variant: boolean;

    @Column("text")
    public description: string;

    @Column("int")
    public pageCount: number;

    @Column("date")
    public onSaleDate: Date;

    @Column("date")
    public unlimitedDate: Date;

    @Column("text")
    public thumbnail: string;

    @ManyToOne(type => Series, series => series.comics)
    public series: Series;
}

import {OneToMany, ClassEntityChild} from "typeorm";
import {Variant} from "./Variant";
import {BaseComic} from "./BaseComic";

@ClassEntityChild()
export class Comic extends BaseComic {

    @OneToMany(type => Variant, variant => variant.comic)
    public variants: Variant[];
}

import {ManyToOne, ClassEntityChild} from "typeorm";
import {Comic} from "./Comic";
import {BaseComic} from "./BaseComic";

@ClassEntityChild()
export class Variant extends BaseComic {

    @ManyToOne(type => Comic, comic => comic.variants)
    public comic: Comic;
}

score 190 · Accepted Answer

我遇到了同样的问题。原来我是循环导入类，这显然是一个限制。（请参阅这些 GitHub 问题：#20361、#4149、#10712）

请注意，循环引用似乎也仅限于文件之间，而不仅仅是类型。

看到这个其他答案

score 38 · Accepted Answer

正如上面 Thomas Jensen 的评论中所指出的，循环引用不仅可以出现在类型中，还可以出现在文件中。当我从同一个文件中导出基本类型和派生类型时，我遇到了同样的问题。如：

// index.ts
export { BaseClass } from "./base";
export { DerivedClass } from "./derived";

这是一个容易掉入的陷阱。在这里发布这个希望它可以节省其他人的调试时间。

score 25 · Accepted Answer

循环依赖可能很难识别。Michael Weststrate 有一篇关于循环依赖的有趣读物，并提出了一种修复它们的模式。

自动循环依赖检测。

除了使用允许可扩展性的模式之外，您还可以使用一个超级有用的工具，它可以轻松识别循环依赖关系，Madge。

Madge 可以运行.ts或.js文件。我发现在两个目录中运行它很有用，因为它们可能会由于转译过程而给出不同的结果。

对于 Typescript .ts 文件：

madge --circular --extensions ts <directory_path>

对于 Javascript .js 文件：

madge --circular <directory_path>

score 3 · Accepted Answer

刚刚遇到这个问题，嗯，很奇怪。我正在运行该项目

node --require ts-node/register path/to/index.ts

即使我按照接受的答案的建议删除了循环引用，这也因上述错误而失败。

但是，如果我运行tsc它可以很好地编译，然后即使使用--require ts-node/register....

希望这可以帮助某人。

score 3 · Accepted Answer

我来到这里是因为当用 jest 执行代码时，它抛出了这个错误。这是因为在为对象中元素的顺序编写时moduleNameMapper是jest.config.js必不可少的。

有一个助手可以从以下位置导入模块名称ts-config.json：

// jest.config.js
const { pathsToModuleNameMapper } = require('ts-jest/utils');
// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
// which contains the path mapping (ie the `compilerOptions.paths` option):
const { compilerOptions } = require('./tsconfig');

module.exports = {
  // [...]
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */ )
};

取自ts-jest的官方文档

score 0 · Accepted Answer

Entity我遇到了同样的问题，因为我的编辑器从错误的包中自动导入。

一旦我改import { Entity } from 'typeorm/decorator/entity/Entity';回import { Entity } from 'typeorm';错误消息就消失了。

score 0 · Accepted Answer

1. 设计一个 React 组件：

class Card extends React.Compoonent {

看错字：Comp oo nent

2. 在 Windows 上安装 Angular 失败并出现错误：

TypeError: Class extends value undefined is not a function or null

开始 > 运行 > AppWiz.cpl > 卸载 node.js
删除节点安装目录删除剩余的文件夹和文件
从开始 > 运行 > %AppData% (AppData\Roaming) 中删除 npm 文件夹
如果存在从 c:\users[username} 目录中删除 npm-cache
安装 node.js 最新版本，请使用默认的C:\Program Files\nodejs安装路径。
打开命令：

C:\Users\Jeremy>node -v
v17.1.0

C:\Users\Jeremy>npm -v
8.1.2

score 0 · Accepted Answer

在我的节点打字稿项目中，我使用了导入/导出语法（过度要求）。

我忘记删除 module.exports 语法的文件中出现此错误：

module.exports = { AbstractClass } // this will cause issues if you use import/export syntax

我只需要删除它并简单地使用“导出”关键字

export class AbstractClass { /* stuff */ }

score 0 · Accepted Answer

我收到此错误是因为我将 Node.js 安装到文件夹中C:\applications（不是默认文件夹，即C:\Program Files\nodejs）

这很奇怪，但是在将 Node.js 重新安装到默认位置后，我可以npm install在新克隆的项目上成功运行。

score -1 · Accepted Answer

内部模块模式

试试这个例子来解决循环依赖。您可以在这里找到详细信息

// -- app.js --
import { AbstractNode } from './internal'

/* as is */

// -- internal.js --
export * from './AbstractNode'
export * from './Node'
export * from './Leaf'

// -- AbstractNode.js --
import { Node, Leaf } from './internal'

export class AbstractNode {
   /* as is */
}

// -- Node.js --
import { AbstractNode } from './internal'

export class Node extends AbstractNode {
   /* as is */
}

// -- Leaf.js --
import { AbstractNode } from './internal'

export class Leaf extends AbstractNode {
   /* as is */
}

javascript - TypeError: Class extends value undefined is not a function or null

10 回答 10

Related

Reference