Polymer 3 build - bundle errors in browser when trying to access mixin

Question

I have a Polymer 3 app that works with no issues. But if I build and bundle it I am having issues when bundled. I am only doing es6 for now. I have no idea how to even go about trouble shooting this..pretty stuck.

Polymer.json

  "builds": [
    {
      "name": "es6-bundled",
      "browserCapabilities": [
        "es2015"
      ],
      "js": {
        "minify": false,
        "transformModulesToAmd": true
      },
      "css": {
        "minify": false
      },
      "html": {
        "minify": false
      },
      "bundle": true,
      "addServiceWorker": false
    }
  ],

---

Error in browser:

all-items:formatted:211 Uncaught TypeError: (0 , _mainApp.PauseForRipple) is not a function
    at user-login.js? [sm]:4

---

Code from bundle:

define(["../main-app.js"], function(_mainApp) {
    "use strict";

    class UserLogin extends (0,
    _mainApp.PauseForRipple)(_mainApp.PolymerElement) {
        static get template() {
            return _mainApp.html`
      <style>
        :host {
          display: flex;
          align-items: center;

---

Original code before build:

import { PauseForRipple } from '../mixins/pause-for-ripple-mixin.js';

class UserLogin extends PauseForRipple(PolymerElement) {
  static get template() {
    return html`
      <style>
        :host {
          display: flex;
          align-items: center;
          justify-content: center;

Answer 1

the root cause is I had double import import './login/user-login.js'; in main-app.js.