Polymer 3 + webpack + babel Конструктор класса PolymerElement нельзя вызвать без «нового»

Question

Я пытаюсь расширить класс миксина в полимере. Это работает нормально, но как только я пытаюсь передать свой код с помощью babel, я получаю конструктор класса PolymerElement, который нельзя вызвать без 'new. Я получаю ошибку, как только я звоню супер. Я уверен, что проблема как-то связана с расширением нативного класса с помощью переданного кода класса, но я пока не смог найти ресурс / пример, который смог бы решить мою проблему. Я предполагаю, что мне нужно настроить свою бабушку по-другому, но, как я уже сказал, найденные примеры не помогли. Вы можете получить доступ к хранилищу, где я воспроизводлю ошибку здесь: https://github.com/skukan159/DebuggingPolymerWebpack

Это мой конфиг веб-пакета:

const webpack = require('webpack');
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');


const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs';

const polyfills = [
    {
        from: path.resolve(`${webcomponentsjs}/webcomponents-*.{js,map}`),
        to: path.join(__dirname, 'wwwroot'),
        flatten: true
    },
    {
        from: './node_modules/web-animations-js/*{.js,.js.map}',
        to: './node_modules/web-animations-js/[name].[ext]'
    }
];
const assets = [
    {
        from: 'manifest.json',
        to: path.resolve(__dirname, 'wwwroot'),
        context: './src/'
    },
    {
        from: 'sw-service-worker.js',
        to: path.resolve(__dirname, 'wwwroot'),
        context: './src/'
    },
    {
        from: 'include/images/*',
        to: path.resolve(__dirname, 'wwwroot'),
        context: './src/'
    },
    {
        from: '*.html',
        to: path.resolve(__dirname, 'wwwroot'),
        context: './src/'
    }
];

module.exports = function (env) {
    return {
        entry: './src/index.js',
        output: {
            publicPath: '/',
            path: path.resolve(__dirname, 'wwwroot'), changed
            filename: "[name].[contenthash].js",  
            chunkFilename: '[name].[contenthash].js',
        },
        node: {
            dns: 'mock',
            net: 'mock'
        },
        optimization: {
            splitChunks: {
                cacheGroups: {
                    vendor: {
                       test: /[\\/]node_modules[\\/]/,
                       name: 'vendors',
                       chunks: 'all'
                    }
                }
            },
            runtimeChunk: 'single',
        },

        module: {
            rules: [
                {
                    test: /\.js$/,
                   exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env', { exclude: ["transform-classes"] }],
                            plugins: [
                                "@babel/plugin-proposal-class-properties",
                                "@babel/plugin-proposal-object-rest-spread",
                                "@babel/plugin-syntax-dynamic-import"
                            ]
                        }
                    }
                },

                {
                    "test": /\.html$/,
                    "use": [{
                        loader: 'html-loader',
                    }]
                },
                {
                    test: /\.json$/,
                    use: 'json-loader'
                },
                {
                    test: /\.(png|svg|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '/img/[name].[ext]'
                            }
                        }
                    ]
                }
            ]
        },

        resolve: {
            modules: [
                "node_modules",
                path.resolve(__dirname, "src")
            ],
            extensions: [".js", ".json"],

            alias: {
                'markjs': path.resolve(__dirname, "./node_modules/mark.js/dist/mark.min.js"),
            }
        },

        plugins: [
            new webpack.HashedModuleIdsPlugin(),
            new HtmlWebpackPlugin({
                template: 'src/index.html'}),
            new webpack.ProvidePlugin({
                IntlMessageFormat: ['intl-messageformat/index.js', 'default'],
                'Mark': 'markjs'
            }),
            new CleanWebpackPlugin(['wwwroot']),
            new WorkboxPlugin.GenerateSW({
                swDest: 'sw.js',
                clientsClaim: true,
                skipWaiting: true
            }),
            new CopyWebpackPlugin([...polyfills, ...assets,
                {
                    from: 'include/components/oidc-client/oidc-client.min.js',
                    to: path.resolve(__dirname, 'wwwroot'),
                    context: './src/'
                },
            ]),
        ],

        watch: true,
        watchOptions: {
            aggregateTimeout: 1000,
            poll: true,
            poll: 500,
        },
    }
};

А вот и мой файл .babelrc

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

Answer 1

Я выяснил в чем проблема. Мне нужно было закомментировать параметры для моего загрузчика babel из файла конфигурации webpack. Только так был применен мой файл конфигурации .babelrc.