Question

问题：
刚开始将我的Polymer PWA更新为Polymer版本2 现在控制台中的每个元素都会出现相同的错误而且没有任何负载。

未捕获TypeError：类扩展值undefined不是构造函数或null

类似的问题与循环依赖有关，但我不确定为什么会发生这种情况，它究竟意味着什么以及如何解决它。也许有人可以在这里清理事情！？
的点子：
我可能正在使用某种Polymer2和amp;的混合物。它是混合模式，因为我仍在使用dom-if并导入 bower_components / polymer / lib / elements / dom-if.html
但是，我不认为这是导致控制台指向的错误类MyApp扩展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需要公共文件夹中的组件在部署应用程序时发送它们。

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

Polymer2 + Firebase：TypeError类扩展值undefined，而不是构造函数或null

1 个答案: