类构造函数PolymerElement不能在没有使用'new'的情况下调用。

Question

昨天我的应用程序运行得非常完美，但是现在当我执行 polymer serve -o 命令时，它会打开应用程序并在控制台中打印出这个错误。

Class constructor PolymerElement cannot be invoked without 'new'

- Gaetano Herman

---

错误提示你有人调用了 PolymerElement() 而不是 new PolymerElement()。如果您正在使用源代码控制，可以查看自昨天以来发生了什么变化，可能会触发此操作。除非熟知 Polymer 的人能够认识到这种情况，否则我们无法在没有看到您的代码或不知道最近更改内容的情况下做太多事情。 - jfriend00

我在我的元素中也有这个错误。 - Ankita

有人遇到这个问题吗？请报告您所使用的CLI版本和浏览器的UA字符串。 （可以尝试访问此网站获取UA字符串：https://www.whatismybrowser.com/detect/what-is-my-user-agent） - Justin Fagnani

Answer 1

1. 清除浏览器缓存中的缓存文件和图像。
2. 如果您加载了custom-elements-es5-adapter.js，请将其删除。
3. 然后使用$ polymer serve --compile never。

根据这篇文章的说法，这个问题是因为$ polymer serve会自动将您的代码编译为es5所导致的。 --compile never标志可以阻止$ polymer serve执行此操作。

- bibi_bryan

Answer 2

我最近将我的Polymer应用程序迁移到v.2后遇到了类似的错误。
这里给出了帮助：

为了解决此问题，请在声明新自定义元素之前加载custom-elements-es5-adapter.js。

由于大多数项目需要支持许多不一定支持ES6的浏览器，因此将项目编译为ES5可能是有意义的。然而，ES5风格的自定义元素类不能与原生自定义元素一起使用，因为ES5风格的类不能正确继承ES6类，例如HTMLElement。

- Niklas

Answer 3

在你的 polymer.json 文件中，将 custom-elements-es5-adapter 添加到 excludes 数组中，以防止它被编译成 ES5。

  "builds": [
    {
      "bundle": {
        "stripComments": true,
        "inlineCss": true,
        "sourcemaps": false,
        "excludes": [
          "bower_components/webcomponentsjs/webcomponents-loader.js",
          "bower_components/webcomponentsjs/custom-elements-es5-adapter.js"
        ]
      },
      "js": {
        "compile": true,
        "minify": true
      },
      "css": {
        "minify": true
      },
      "html": {
        "minify": true
      },
      "addServiceWorker": false

- Hubert

Answer 4

问题出现的原因是Custom Elements v1要求您的代码使用ES6语法。因此，请确保您不要将其转译为任何较低版本，例如ES5。

对于像我一样使用Parcel打包工具遇到这个问题的人；默认情况下，它会将您的代码编译为ES5或其他内容，即使您正在使用TypeScript并将tsconfig目标设置为ES6。

解决方案是告诉Parcel您要针对哪些浏览器进行目标定位，以便它知道它不必将其转译为ES5。一种方法是在package.json中添加“browserlist”字段。

我通过这个video了解到了这个问题。如果您想了解更多信息，建议您去观看该视频。

- Thijs Koerselman

Answer 5

我将我的 Polymer 应用程序构建为 es5-bundled，并使用 WebView 提供给 Android 应用程序。

这个问题经常出现。

- Cris Liao