javascript - Polymer2 + Firebase : TypeError class extends value undefined, 不是构造函数或 null

Question

问题:
刚刚开始将我的 Polymer PWA 更新到 Polymer 版本 2 现在控制台中的每个元素都出现相同的错误，并且没有加载任何内容。

未捕获类型错误:类扩展值未定义不是构造函数或 null

类似的问题与循环依赖有关，但我不太确定为什么会发生这种情况、它的确切含义以及如何解决它。也许有人可以清理这里的东西!？

想法:
我可能正在使用 Polymer2 的某种混合，它是混合模式，因为我仍在使用 dom-if 并导入了 bower_components/polymer/lib/elements/dom-if.html
但是，我不认为这是导致错误的原因，因为控制台指向
class MyApp extends Polymer.Element

示例 1:

 <!-- import CSS mixin shim -->
 <link rel="import" href="bower_components/shadycss/apply-shim.html">
 <!-- import custom-style -->
 <link rel="import" href="bower_components/polymer/lib/elements/custom-style.html">
 <!-- import template repeater -->
 <link rel="import" href="bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="bower_components/polymer/polymer-element.html">
 <!-- Polymer Imports -->
 <link rel="import" href="bower_components/polymer/polymer.html">
 <!-- CustomElements -->
 <link rel="import" href="src/customElements/custom-icons.html">
 <link rel="import" href="my-landingpage.html">
 <link rel="import" href="my-yole.html">

 <dom-module id="my-app">
  <template>
    <style>
      :host > * {
        display: block;
      }
    </style>

    <template is="dom-if" if="[[!user]]">
      <my-landingpage></my-landingpage>
    </template>

    <template is="dom-if" if="[[user]]">
      <my-yole></my-yole>
    </template>

  </template>

  <script>
    class MyApp extends Polymer.Element {

      static get is() { return 'my-app'; }

    }
    customElements.define(MyApp.is, MyApp);
  </script>
 </dom-module>

错误相同的示例 2:

     <!-- import CSS mixin shim -->
 <link rel="import" href="../../bower_components/shadycss/apply-shim.html">
 <!-- import custom-style -->
 <link rel="import" href="../../bower_components/polymer/lib/elements/custom-style.html">
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
 <!-- Polymer Imports -->
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 <link rel="import" href="../../bower_components/app-layout/app-grid/app-grid-style.html">
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html">
 <link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
 <link rel="import" href="custom-icons.html">
 <!-- Custom Elements & Style -->

 <dom-module id="my-footer">
   <template>
     <style include="app-grid-style">
       :host > * {
         display: block;
         --app-grid-columns: 3;
         --app-grid-gutter: 24px;
       }
     </style>

     <div>
       <ul id="footer" class="app-grid">
          <li>Terms of use</li>
          <li>
             <a href="https://www.facebook.com">
                <iron-icon icon="custom-icons:facebook"></iron-icon>
             </a>
             <a href="https://www.instagram.com">
                <iron-icon icon="custom-icons:instagram"></iron-icon>
             </a>
           </li>
           <li on-tap="openPolicy">Privacy Policy</li>
       </ul>
     </div>
     <paper-dialog id="policyDialog" with-Backdrop>
         <h2>Privacy Policy</h2>
         <h2>Privacy Policy for yogiyolie.com </h2>
     </paper-dialog>
   </template>

   <script>
     class MyFooter extends Polymer.Element {
       static get is() { return 'my-footer'; }
       constructor() {
         super();
       }

       connectedCallback() {
         super.connectedCallback();
         this._updateGridStyles = this._updateGridStyles || function() {
             this.updateStyles();
         }.bind(this);
         window.addEventListener('resize', this._updateGridStyles);
       }

       disconnectedCallback() {
         super.disconnectedCallback();
         window.removeEventListener('resize', this._updateGridStyles);
       }

       openPolicy() {
         this.$.policyDialog.toggle();
       }
     }

    customElements.define(MyFooter.is, MyFooter);
   </script>
 </dom-module>

Answer 1

所以我忘了说的是，我正在使用 Firebase 来提供和部署我的应用程序。
我刚刚注意到我有 2 个 bower-components 文件夹。
Firebase 需要 public 文件夹中的组件在部署应用程序时传送它们。

更新 bower-components 时，我只是在顶级目录中创建一个新文件夹，而不是更改我的公共(public)文件夹中的现有文件夹。虽然这看起来有点明显，但我会把问题留在网上，以防有一天有人遇到同样的问题。