Custome element in Google Web Designer - showing Unexpected and not define error

I need to create custom element on GWD for the team, I was creating the web components then compile it with babel to ES5 (based on Google help center requested). I used this babel to compile it: https://babeljs.io/repl, but not sure if the setting is correct.

When import the component zip file into GWD and preview it on browser, errors below show:

Uncaught SyntaxError: Unexpected token 'export'   
Uncaught ReferenceError: require is not defined 

Here is the code after compiled (main.js)

"use strict";

function _typeof(obj) {
  "@babel/helpers - typeof";
  return (
    (_typeof =
      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
        ? function (obj) {
            return typeof obj;
          }
        : function (obj) {
            return obj &&
              "function" == typeof Symbol &&
              obj.constructor === Symbol &&
              obj !== Symbol.prototype
              ? "symbol"
              : typeof obj;
          }),
    _typeof(obj)
  );
}

Object.defineProperty(exports, "__esModule", {
  value: true,
});
exports["default"] = void 0;

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  Object.defineProperty(Constructor, "prototype", { writable: false });
  return Constructor;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: { value: subClass, writable: true, configurable: true },
  });
  Object.defineProperty(subClass, "prototype", { writable: false });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _createSuper(Derived) {
  var hasNativeReflectConstruct = _isNativeReflectConstruct();
  return function _createSuperInternal() {
    var Super = _getPrototypeOf(Derived),
      result;
    if (hasNativeReflectConstruct) {
      var NewTarget = _getPrototypeOf(this).constructor;
      result = Reflect.construct(Super, arguments, NewTarget);
    } else {
      result = Super.apply(this, arguments);
    }
    return _possibleConstructorReturn(this, result);
  };
}

function _possibleConstructorReturn(self, call) {
  if (call && (_typeof(call) === "object" || typeof call === "function")) {
    return call;
  } else if (call !== void 0) {
    throw new TypeError(
      "Derived constructors may only return object or undefined"
    );
  }
  return _assertThisInitialized(self);
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return self;
}

function _wrapNativeSuper(Class) {
  var _cache = typeof Map === "function" ? new Map() : undefined;
  _wrapNativeSuper = function _wrapNativeSuper(Class) {
    if (Class === null || !_isNativeFunction(Class)) return Class;
    if (typeof Class !== "function") {
      throw new TypeError("Super expression must either be null or a function");
    }
    if (typeof _cache !== "undefined") {
      if (_cache.has(Class)) return _cache.get(Class);
      _cache.set(Class, Wrapper);
    }
    function Wrapper() {
      return _construct(Class, arguments, _getPrototypeOf(this).constructor);
    }
    Wrapper.prototype = Object.create(Class.prototype, {
      constructor: {
        value: Wrapper,
        enumerable: false,
        writable: true,
        configurable: true,
      },
    });
    return _setPrototypeOf(Wrapper, Class);
  };
  return _wrapNativeSuper(Class);
}

function _construct(Parent, args, Class) {
  if (_isNativeReflectConstruct()) {
    _construct = Reflect.construct.bind();
  } else {
    _construct = function _construct(Parent, args, Class) {
      var a = [null];
      a.push.apply(a, args);
      var Constructor = Function.bind.apply(Parent, a);
      var instance = new Constructor();
      if (Class) _setPrototypeOf(instance, Class.prototype);
      return instance;
    };
  }
  return _construct.apply(null, arguments);
}

function _isNativeReflectConstruct() {
  if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  if (Reflect.construct.sham) return false;
  if (typeof Proxy === "function") return true;
  try {
    Boolean.prototype.valueOf.call(
      Reflect.construct(Boolean, [], function () {})
    );
    return true;
  } catch (e) {
    return false;
  }
}

function _isNativeFunction(fn) {
  return Function.toString.call(fn).indexOf("[native code]") !== -1;
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf
    ? Object.setPrototypeOf.bind()
    : function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
      };
  return _setPrototypeOf(o, p);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf
    ? Object.getPrototypeOf.bind()
    : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
      };
  return _getPrototypeOf(o);
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true,
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

var template = document.createElement("template");
template.innerHTML =
  '\n    <link rel="stylesheet" href="./style.css"/>\n    <div class="pet-card">\n      <div class="avatar">\n        <img />\n      </div>\n      <div class="details">\n        <h2></h2>\n        <div class="info">\n          <p>Breed: <span class="breed"></span></p>\n          <p>Age: <span class="age"></span></p>\n        </div>\n        <div class="actions">\n            <button id="greet">Say Hi!</button>\n            <button id="toggle">View Details</button>\n        </div>\n      </div>\n     \n    </div>\n';

var PetCard = /*#__PURE__*/ (function (_HTMLElement) {
  _inherits(PetCard, _HTMLElement);

  var _super = _createSuper(PetCard);

  function PetCard() {
    var _this;

    _classCallCheck(this, PetCard);

    _this = _super.call(this);

    _defineProperty(_assertThisInitialized(_this), "toggleInfo", function () {
      _this.showInfo = !_this.showInfo;
      _this.shadowRoot.querySelector(".info").style.display = _this.showInfo
        ? "block"
        : "none";
      _this.shadowRoot.querySelector("#toggle").innerHTML = _this.showInfo
        ? "Hide Details"
        : "View Details";
    });

    _this.showInfo = false;

    _this.attachShadow({
      mode: "open",
    });

    _this.shadowRoot.appendChild(template.content.cloneNode(true));

    return _this;
  }

  _createClass(
    PetCard,
    [
      {
        key: "attributeChangedCallback",
        value: function attributeChangedCallback(name, oldValue, newValue) {
          this.shadowRoot.querySelector(".details h2").innerText =
            this.getAttribute("name");
          this.shadowRoot.querySelector(".avatar img").src =
            this.getAttribute("avatar");
          this.shadowRoot.querySelector(".avatar img").alt =
            this.getAttribute("name");
          this.shadowRoot.querySelector(".info .breed").innerText =
            this.getAttribute("breed");
          this.shadowRoot.querySelector(".info .age").innerText =
            this.getAttribute("age");
        },
      },
      {
        key: "connectedCallback",
        value: function connectedCallback() {
          var _this2 = this;

          this.shadowRoot
            .querySelector("#toggle")
            .addEventListener("click", this.toggleInfo);
          this.shadowRoot
            .querySelector("#greet")
            .addEventListener("click", function () {
              return window.alert(
                "Hey there! I'm ".concat(_this2.getAttribute("name"))
              );
            });
        },
      },
      {
        key: "disconnectedCallback",
        value: function disconnectedCallback() {
          var _this3 = this;

          this.shadowRoot
            .querySelector("#toggle")
            .removeEventListener("click", this.toggleInfo);
          this.shadowRoot
            .querySelector("#greet")
            .removeEventListener("click", function () {
              return window.alert(
                "Hey there! I'm ".concat(_this3.getAttribute("name"))
              );
            });
        },
      },
    ],
    [
      {
        key: "observedAttributes",
        get: function get() {
          return ["name", "avatar", "breed", "age"];
        },
      },
    ]
  );

  return PetCard;
})(/*#__PURE__*/ _wrapNativeSuper(HTMLElement));

var _default = PetCard;
exports["default"] = _default;

index.js

"use strict";

var _main = _interopRequireDefault(require("./main.js"));

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

window.customElements.define("pet-card", _main["default"]);

Well, after keep on trying and refer to the GWD example, finally get the element show in GWD preview.

posting here for record:

Remove below code after compile with Babel

function _typeof(obj) {
  "@babel/helpers - typeof";
  return (
    (_typeof =
      "function" == typeof Symbol && "symbol" == typeof Symbol.iterator
        ? function (obj) {
            return typeof obj;
          }
        : function (obj) {
            return obj &&
              "function" == typeof Symbol &&
              obj.constructor === Symbol &&
              obj !== Symbol.prototype
              ? "symbol"
              : typeof obj;
          }),
    _typeof(obj)
  );
}

Object.defineProperty(exports, "__esModule", {
  value: true,
});
exports["default"] = void 0;

export default PetCard;

Then wrap the other code within this condition

if (window.customElements && window.customElements.define) {
   //other code
})(/*#__PURE__*/ _wrapNativeSuper(HTMLElement));