Polymer 3 + Webpack - ›PolymerElement нельзя вызвать без« нового »

Я тестирую предварительный код Polymer 3.0 и хочу настроить простой проект с Webpack и Babel, преобразуя его обратно в ES5.

Компиляция работает нормально. Я добавил custom-elements-es5-adapter.js на свою демонстрационную страницу, но связанный код выполняется со следующей ошибкой:

custom-component.js:13 Uncaught TypeError: Class constructor PolymerElement cannot be invoked without 'new'
    at HTMLElement.CustomComponent (custom-component.js:13)
    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:23)
    at __webpack_require__ (bootstrap 6c5b87648fe743e36ebc:19)
    at window.JSCompiler_renameProperty (bootstrap 6c5b87648fe743e36ebc:62)
    at bootstrap 6c5b87648fe743e36ebc:62

Код ES6 взят отсюда: https://www.polymer-project.org/blog/2017-08-23-hands-on-30-preview

import {Element as PolymerElement} from '@polymer/polymer/polymer-element';

export class CustomComponent extends PolymerElement {
    static get template() {
        return `<div>This is my [[name]] app.</div>`
    }

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

    static get properties() {
        name: {
            Type: String
        }
    }
}

customElements.define('custom-component', CustomComponent);

webpack.config.js

const {resolve} = require('path');

module.exports = {
    context: resolve(__dirname, 'src'),
    entry: {
        "custom-component": './custom-component.js'
    },
    output: {
        filename: '[name].js',
        path: resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.js']
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

Вы можете найти код в моем репозитории Github для быстрого просмотра: https://github.com/janrembold/webcomponent-examples/tree/master/06-frameworks/04-polymer

Эта ошибка возникает только из-за раннего состояния Polymer3? Или я что-то здесь упускаю?

Кстати, я не хочу использовать полимер-cli, потому что у нас есть особые требования в нашем проекте.

Заранее благодарю за любую помощь!


person Jan Rembold    schedule 07.03.2018    source источник


Ответы (1)


У меня была такая же проблема: я решил ее, используя babel-plugin-syntax-dynamic-import для браузеров, поддерживающих собственные пользовательские элементы (сафари и хром). И используя babel-plugin-dynamic-import-webpack для транспиляции.

нет транспиляции: plugins: ['syntax-dynamic-import']

транспиляция: plugins: ['dynamic-import-webpack']

person rickdehoop    schedule 09.03.2018
comment
Как выглядит конфигурация вашего загрузчика веб-пакетов? Я все еще получаю сообщение об ошибке. - person Yairopro; 07.08.2018
comment
Вы можете показать мне свой файл webpack.js и свои ошибки? - person rickdehoop; 12.08.2018