Polymer2 + Firebase: TypeError class extends value undefined, not a constructor or null

Question

Problem:
Just started updating my Polymer PWA to Polymer version 2 and now getting the same error for each element in the console and nothing loads.

Uncaught TypeError: Class extends value undefined is not a constructor or null

Similar issues had something to do with circular dependencies but I am not really sure why this happens, what it exactly means and how to resolve it. Maybe someone can clear things up here!?

Idea:
I might be using some sort of mix of Polymer2 & it's hybrid mode as I am still using the dom-if and imported the bower_components/polymer/lib/elements/dom-if.html
However, I don't think this is causing the error as the console points to
class MyApp extends Polymer.Element

Example 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>

Example 2 with the same Error:

     <!-- 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

So what I forgot to mention is that I am using Firebase to serve and deploy my app.
I just noticed that I have 2 bower-components folder.
Firebase requires the components inside the public folder to ship them when deploying the app.

When updating the bower-components I was just simply creating a new folder in the top level directory instead of changing the existing one in my public folder. Although this seems kind of obvious I will leave the question online in case someone should be having the same issue one day.