Polymer 3.0.5 - DOMException: не удалось выполнить 'define' в 'CustomElementRegistry'

Я не думаю, что это повторяющаяся проблема. У меня установлен только @ полимер / полимер в качестве зависимости и импортирован в мой комплект поставщика (без @ polymer / paper-input). Я использую v3.0.5, и я даже не вижу iron-meta в дереве зависимостей (через список npm), и моя трассировка стека выглядит иначе - она ​​указывает на полимер / lib / elements / dom-module.js

dom-module.js: 178 Uncaught DOMException: не удалось выполнить 'define' в 'CustomElementRegistry': это имя уже использовалось с этим реестром

След указывает на эту линию customElements.define('dom-module', DomModule);

at @polymer/polymer/lib/elements/dom-module.js?:178:16

Я пытаюсь настроить базовый проект Polymer 3. Я использую Webpack с babel-loader для компиляции в es5. Поскольку я компилирую в es5, я включаю custom-elements-es5-adapter.js вместе с webcomponents-bundle.js в соответствии с инструкциями в репозитории webcomponentsjs. Эти сценарии просто копируются из node_modules в выходной каталог, а теги сценария включаются в заголовок html.

Что касается кода моего компонента, я создаю отдельные фрагменты js для каждого полимерного компонента, а также отдельный фрагмент для общего импорта, который в настоящее время включает только Polymer. Компиляция и разделение кода работают без ошибок, и полученные фрагменты добавляются в html перед закрывающим тегом тела.

Плагин Webpack SplitChunks вытягивает @polymer/polymer импорт в отдельный блок, поэтому они включаются только один раз.

Цель состоит в том, чтобы весь требуемый код поставщика был втянут в общий сценарий, а каждый компонент - в крошечный собственный фрагмент, который можно было бы выборочно включить.

• my-common.js (общий / общий блок)
• my-button.js (фрагмент компонента)
• my-tabs.js (фрагмент компонента)
• ... больше блоков компонентов

При моих текущих настройках чанки создаются правильно.

Теоретически и исходя из того, что я читал до сих пор, это должно сработать, но я полностью застрял на этой ошибке.

Если я объединю файлы компонентов вместе, все будет работать нормально.

Вот пример одного из моих очень простых файлов компонентов:

import { html, PolymerElement } from '@polymer/polymer';

export default class MyButton extends PolymerElement {
  constructor() {
    super();
  }

  static get template() {
    return html`
      <slot></slot>
    `;
  }

  static get properties() {
    return { }
  }
}

customElements.define('my-button', MyButton);

Вот конфигурация веб-пакета, которую я создал для этого доказательства концепции:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const SRC_PATH = path.resolve(__dirname, './src');
const DIST_PATH = path.resolve(__dirname, './dist');

module.exports = {
  entry: {
    'my-button': `${SRC_PATH}/js/components/my-button.js`,
    'my-tabs': `${SRC_PATH}/js/components/my-tabs.js`
  },
  output: {
    filename: 'js/[name].js',
    path: DIST_PATH
  },
  resolve: {
    extensions: ['.js']
  },
  module: {
    rules: [{
        test: /\.js$/,
        loader: 'babel-loader',
        query: {
          presets: [[
            'env',
            {
              targets: {
                browsers: [
                  'last 2 versions',
                  'ie > 10'
                ]
              },
              debug: true
            }
          ]]
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: `${SRC_PATH}/index.html`,
      filename: 'index.html',
      inject: 'head'
    }),
    new CopyWebpackPlugin([{
      from: './node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js',
      to: 'js/vendor',
      toType: 'dir'
    }, {
      from: './node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js',
      to: 'js/vendor',
      toType: 'dir'
    }, {
      from: './node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js',
      to: 'js/vendor',
      toType: 'dir'
    }]),
    new BundleAnalyzerPlugin()
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        default: false,
        commons: {
          name: 'my-common',
          chunks: 'all',
          minChunks: 2
        }
      }
    },
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          ie8: false,
          safari10: false,
          compress: {
            warnings: false,
            drop_console: true
          },
          output: {
            ascii_only: true,
            beautify: false
          }
        }
      })
    ]
  },
  devServer: {
    contentBase: DIST_PATH,
    compress: false,
    overlay: {
      errors: true
    },
    port: 8080,
    host: '127.0.0.1'
  }
};

А вот HTML:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
  <title>polymer-3-sandbox</title>
  <meta name="description" content="A polymer 3 sandbox">
  <link rel="manifest" href="/manifest.json">
  <script src="/js/vendor/webcomponents-bundle.js"></script>
  <script src="/js/vendor/custom-elements-es5-adapter.js"></script>
  <script type="text/javascript" src="js/my-common.js"></script> 
  <script type="text/javascript" src="js/my-button.js"></script>
  <script type="text/javascript" src="js/my-tabs.js"></script>
</head>

<body>    
  <p>
    <my-button>Learn More</my-button>
  </p>
</body>

</html>