polymer doesn't work with babel-loader in webpack?

[fanyer]

I use polymer 3.0 preview , and bundle custom elements with webpack & babel. When I doesn't transpile .js with babel-loader. it works normally in chrome 61. However, if I use babel-loader to transpile class statement, it throws error as below

Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'
    at new MyApp (app.js:10656)
    at Object.window.WebComponents (app.js:10677)
    at __webpack_require__ (app.js:678)
    at fn (app.js:88)
    at Object.<anonymous> (app.js:4653)
    at __webpack_require__ (app.js:678)
    at module.exports.ctor.super_ (app.js:724)
    at app.js:727

my components.js to define custom elements:

import '@webcomponents/webcomponentsjs/webcomponents-loader.js';
import {Element as PolymerElement} from '../node_modules/@polymer/polymer/polymer-element.js';
import * as view from './aaa.html';

export class MyApp extends PolymerElement {

  // Define a string template instead of a `<template>` element.
  static get template() {
    return view;
  }

  constructor() {
    super();
    this.name = '3.0 adaa11dpreview';
  }

  // properties, observers, etc. are identical to 2.x
  static get properties() {
    name: {
      Type: String
    }
  }
}
customElements.define('my-app', MyApp);

my webpack.conf.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    app: [
        './src/my-app'
    ]
  },
  devtool: 'eval-source-map',
  devServer: {
    contentBase: path.resolve(__dirname, '..', 'dist'),
    hot: true
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, '..', 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(html)$/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        },
        exclude: /node_modules/
      } 
    ]
  },
  resolve: {
    extensions: ['.js']
  },
  plugins: [

    new HtmlWebpackPlugin({
      template: './index.html'
    }),

    new webpack.HotModuleReplacementPlugin(),
  ]
};

Does Polymer not support babel transpile?

[web-padawan]

When transpiling to ES5, you have to include custom-elements-es5-adapter.js for browsers supporting native Custom Elements (Chrome and Safari 10.1+)

[TimvdLippe]

@web-padawan is correct. Please load the custom elements es5 adapter as well and you can load ES5 transpiled code in Chrome and Safari.

[janrembold]

@fanyer Did the include of custom-elements-es5-adapter.js fix the problem for you?

I have a pretty close configuration except that I use babel-loader v8 and @babel/preset-env. With and without the ES5 polyfill I get the error message (without polyfill the second and third error message lines are gone):

custom-component.js:14 Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'
    at HTMLElement.CustomComponent (custom-component.js:14)
    at new j (custom-elements-es5-adapter.js:4)
    at CustomElementRegistry.value (custom-elements-es5-adapter.js:4)
    at Object.defineProperty.value (custom-component.js:26)
    at __webpack_require__ (bootstrap 6c5b87648fe743e36ebc:19)
    at window.JSCompiler_renameProperty (bootstrap 6c5b87648fe743e36ebc:62)

[dragosh]

If you use @babel/preset-env try out this .babelrc config, it worked for me.

{
  "presets": [
    ["@babel/preset-env", {
      "targets": {
        "browsers": ["last 2 versions", "ie >= 11"]
      },
      "exclude": ["transform-classes"]
    }
    ],
    ["@babel/typescript"]
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-object-rest-spread"
  ]
}

[minteliuwm]

@fanyer Have you solved this problem? I tried the above solution and it didn't solve it.