Javascript ES6 TypeError：没有'new'就不能调用类构造函数客户端答案

【问题标题】：Javascript ES6 TypeError: Class constructor Client cannot be invoked without 'new'Javascript ES6 TypeError：没有'new'就不能调用类构造函数客户端
【发布时间】：2019-01-22 09:50:27
【问题描述】：

我有一个用 Javascript ES6 编写的类。当我尝试执行nodemon 命令时，我总是看到这个错误TypeError: Class constructor Client cannot be invoked without 'new'

下面提到了完整的错误：

/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:45
        return (0, _possibleConstructorReturn3.default)(this, (FBClient.__proto__ || (0, _getPrototypeOf2.default)(FBClient)).call(this, props));
                                                                                                                              ^

TypeError: Class constructor Client cannot be invoked without 'new'
    at new FBClient (/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:45:127)
    at Object.<anonymous> (/Users/akshaysood/Blockchain/fabricSDK/dist/application/Transaction.js:195:14)
    at Module._compile (module.js:641:30)
    at Object.Module._extensions..js (module.js:652:10)
    at Module.load (module.js:560:32)
    at tryModuleLoad (module.js:503:12)
    at Function.Module._load (module.js:495:3)
    at Module.require (module.js:585:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/Users/akshaysood/Blockchain/fabricSDK/dist/routes/users.js:11:20)

我想要做的是，我创建了一个类，然后创建了该类的一个实例。然后我正在尝试导出该变量。

类结构定义如下：

class FBClient extends FabricClient{

    constructor(props){
        super(props);
    }

<<< FUNCTIONS >>>

}

我如何尝试导出变量 ->

var client = new FBClient();
client.loadFromConfig(config);

export default client = client;

你可以在这里找到完整的代码>https://hastebin.com/kecacenita.js Babel 生成的代码 > https://hastebin.com/fabewecumo.js

【问题讨论】：

我不确定您是否可以导出类的实例。我认为您必须导出类，将其导入另一个类，然后在那里创建实例
@bwalshy - 您可以导出任何值，包括类的实例。
@T.J.Crowder 此代码无法在线运行，因为它需要区块链模块。
@AkshaySood - 错误显然与区块链无关，而与基本类定义和实例化有关。请阅读该 MCVE 链接。您不需要发布所有代码。您需要完成一个生成最小复制示例的过程。您甚至没有向我们展示发生错误的类。
你在使用 Babel 转译你的代码吗？ (possibly related issue, but just a guess)

标签： javascript node.js ecmascript-6

【解决方案1】：

对于 Angular 9+，这也可能是使用 typescript 编译标志的问题：

downlevelIteration
importHelpers

更多信息在这里Lhttps://www.typescriptlang.org/tsconfig#downlevelIteration。

尝试在您的tsconfig.josn 中使用此标志：

{
    "compilerOptions": {
        ...
        "downlevelIteration": true,
        "importHelpers": true,
        ...
    }
}

没有"importHelpers": true 它也应该可以工作。

此解决方案主要用于 Angular 9+ 和 ngcc 编译器 - 这是 Angular 11 发生的问题。自项目中有Angular 4+。将这些包迁移到 Angular 9+ 库（项目文件夹）后，错误开始发生。我发现这些标志（严格来说是 downlevelIteration）正好解决了这个问题。

【讨论】：

【解决方案2】：

解决办法是降级包版本。

npm 卸载 connect-mongo

npm i connect-mongo@3

【讨论】：

【解决方案3】：

在我的例子中，它是来自“mobx-react-lite”的观察者。

【讨论】：

【解决方案4】：

对于使用ts-node的用户，可能ts-node无法加载您的tsconfig.json。

确保您已为tsconfig.json 设置了以下选项：

    {
        "compilerOptions": {
            "target": "ES6",
            ...
        }
    }

尝试ts-node --script-mode 或使用--project 指定tsconfig.json 的路径。

【讨论】：

【解决方案5】：

如果你没有使用 babel 和简单的 typescript。我收到了材料错误。尝试减少版本并将它们降低到相似的版本。我的包有多种版本。我通过降低 cdk、material 等包的包版本解决了这个问题。

【讨论】：

【解决方案6】：

问题是该类扩展了原生 ES6 类，并通过 Babel 转译为 ES5。转译的类不能扩展原生类，至少在没有额外措施的情况下是这样。

class TranspiledFoo extends NativeBar {
  constructor() {
    super();
  }
}

结果类似于

function TranspiledFoo() {
  var _this = NativeBar.call(this) || this;
  return _this;
}
// prototypically inherit from NativeBar

由于 ES6 类只能用new 调用，NativeBar.call 会导致错误。

任何最新的 Node 版本都支持 ES6 类，它们不应该被转译。 es2015 应该从 Babel 配置中排除，最好使用 env preset set to node target。

同样的问题applies to TypeScript。编译器应正确配置为不转译类，以便它们从本机或 Babel 类继承。

【讨论】：

如答案所述。将 Babel 配置更改为不转换为 ES5。 es2015 preset 负责此行为。
如果我不使用 Babel 将 ES6 转换为 ES5。它抛出错误：意外的令牌导入：
手册涵盖了这一点，babeljs.io/docs/en/babel-preset-env。使用“目标节点”。
@jchook 从技术上讲，它的工作方式类似于function A() { if (!new.target) throw new Error('cannot be invoked without new') }。 A 有它的术语，但它绝对是一个函数。
@Haroldo_OK 确实，至少如果这意味着支持旧版浏览器（浏览器应用程序在 2020 年不一定是 ES5）。如果有一个类扩展了内置类（Error、Promise 等），它应该以特殊的方式扩展以与 ES5 兼容，这在 SO 的其他问题中有所涉及。如果一个类扩展了原生 ES6 类，那么 ES5 应用程序中是否存在未编译的类才是真正的问题。

【解决方案7】：

我编译的不是 Javascript，而是 Typescript，遇到了同样的问题。

我编辑了 Typescript 编译器配置文件 tsconfig.json，以生成 ES2017 Javascript 代码：

{
    "compilerOptions": {
        "target": "ES2017",

而不是默认值，ES2015？ — 然后一切正常。

（也许这个答案对使用 Typescript 并在搜索相同错误消息时发现此问题的人有所帮助，就像我一样。）

【讨论】：

为我工作。谢谢！

【解决方案8】：

在package.json 中，您可以将目标配置与@babel/preset-env 一起使用。将esmodules 设置为“真”。

以下是我在文件中的使用示例：

  "babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "esmodules": true
          }
        }
      ],
      "@babel/preset-react",
      "@babel/preset-flow"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  },

【讨论】：

【解决方案9】：

我希望你已经能够解决你的问题，这是我对这个错误的解决方案：

块引用

class indexRoutes
{

    public  router: Router= Router();
}
const INDEX_ROUTES = new indexRoutes();
export default INDEX_ROUTES.router;

【讨论】：