Question

感谢这几个问题已被问过几次，但我遇到的几乎所有情况都是有人试图扩展非本地类的情况。我的情况不同。我有一个非常简单的基类，名为CObject，如下所示：

export class CObject extends BaseObject {
    constructor() {
        super();
    }
    static url(path: string): string { return ""; }
    static wssUrl(): string { return ""; }
    static callMethod(method, path: string, params: any, noConvertData?: boolean): Promise<any> { return null; }
    static post(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('post', path, params, noConvertData);
    }

    static put(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('put', path, params, noConvertData);
    }

    static patch(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('patch', path, params, noConvertData);
    }

    static get(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('get', path, params, noConvertData);
    }

    static delete(path: string, params: any, noConvertData?: boolean): Promise<any> {
        return CObject.callMethod('delete', path, params, noConvertData);
    }
}

包括BaseObject在内的整个类层次结构只是简单的Typescript类。但是，当我从CObject扩展一个类然后尝试实例化它时，我得到了这个可怕的错误（现在是4天！）。有趣的是，我可以自己实例化CObject而没有任何问题。它只是提供问题的派生类，甚至是像这样的空类：

export class TestClass extends CObject {
    constructor() {
        super();
    }
}

值得注意的是，此代码在我的服务器（Node.js）和客户端之间共享。代码在服务器端完美运行。没有任何问题。我试过看一下babel生成的代码，它只是简单的ES6类。所有其他TS生成的类都可以正常运行，CObject下面的所有内容在调用CObject构造函数时都会失败。

我的.babelrc如下：

{
    "presets": [
        "es2015-node5",
        "react",
        "stage-0",
        "stage-1",
        "bluebird"
    ],
    "plugins": [
        "transform-decorators-legacy",
        "react-hot-loader/babel",
        "transform-async-to-bluebird",
        "transform-promise-to-bluebird",
        "transform-runtime",
        [
            "module-alias", 
            [
                { "src": "./build/Server", "expose": "Server" },
                { "src": "./build/Shared", "expose": "Shared" },
                { "src": "./build/Client", "expose": "Client" }
            ]
        ]
    ],
    "compact": "false"
}`

对于客户端编译，我在tsconfig.json中的awesome-typescript-loader配置如下：

编辑：我正在查看错误的ATL配置。完整配置如下：

"awesomeTypescriptLoaderOptions": {
    "babelrc": true,
    "useBabel": true,
    "useWebpackText": true,
    "useTranspileModule": true,
    "doTypeCheck": true,
    "forkChecker": true,
    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
    "babelOptions": {
        "sourceMaps": true
    },
    "useCache": true
}

客户端webpack配置如下：

var path = require('path');
var webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

let outputDir = path.join(__dirname, "..", "dist", "Client");
console.log(`Output: ${outputDir}`);

module.exports = {
    entry: "./src/Client/Browser/Src/Main.tsx",
    output: {
        filename: "client.js",
        path: outputDir
    },
    target: 'web',

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json"],
        plugins: [new TsconfigPathsPlugin({ configFile: "./tsconfig.json" })],
        modules: [
            "./node_modules",
            "./src/Shared",
            "./src/Client"
        ]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    }
};

任何帮助将不胜感激。谢谢。

编辑：确切的错误是：

ConfigSection.ts?26cc:18 Uncaught TypeError: Class constructor CObject cannot be invoked without 'new'
    at new ConfigSection (ConfigSection.ts?26cc:18)
    at Object../src/Shared/Model/Config/ShAlpha.ts (ShAlpha.ts:338)
    at __webpack_require__ (bootstrap:19)

Answer 1

好的，感谢Oscar Paz，我已经能够解决这个问题了。事实证明，罪魁祸首是我的ATL配置：

"awesomeTypescriptLoaderOptions": {
    "babelrc": true,
    "useBabel": true,
    "useWebpackText": true,
    "useTranspileModule": true,
    "doTypeCheck": true,
    "forkChecker": true,
    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],
    "babelOptions": {
        "sourceMaps": true
    },
    "useCache": true
}

更具体地说，这一行：

    "presets": ["env", { "targets": "last 2 versions, ie 11", "modules": false }, { "exclude": ["transform-es2015-classes"] } ],

即使我设置了：

    "babelrc": true,

期望使用.babelrc，这是用于Node.js代码的东西。这导致生成从CObject派生的类的多个定义（ES6和ES5）。因此CObject正确生成：

let CObject = exports.CObject = class CObject extends _BaseObject.BaseObject {} ...

ConfigSection的第一个定义也正确生成：

let ConfigSection = ConfigSection_1 = class ConfigSection extends Shared_Core_CObject__WEBPACK_IMPORTED_MODULE_1__["CObject"] {} ...

然后再往下走：

var ConfigSection = ConfigSection_1 = function (_CObject) {
    (0, _inherits3.default)(ConfigSection, _CObject); ...

这是造成错误的原因。我不知道为什么ATL不会忽略这些选项以及为什么这些选项会导致这种代码。也许，有更好理解的人可以解释一些问题。

Answer 2

对于其他Google员工，此错误的另一个原因：在04/2019上，使用未维护的why-did-you-update npm React模块导致了此错误。

删除模块及其调用可修复该错误。

没有'new'

2 个答案: