title: Polymer 3.0.5 - "DOMException: Failed to execute 'define' on 'CustomElementRegistry'"
body: <p>I don't think this is a duplicate issue. I only have @polymer/polymer installed as a dependency and imported into my vendor bundle (no @polymer/paper-input). I'm using v3.0.5 and I don't even see iron-meta in the dependency tree (via npm list) and my stack trace looks different - it points to polymer/lib/elements/dom-module.js</p>
  
  <hr>
  
  <blockquote>
    <p>dom-module.js:178 Uncaught DOMException: Failed to execute 'define' on
    'CustomElementRegistry': this name has already been used with this
    registry</p>
  </blockquote>
  
  <p>The trace points to this line <code>customElements.define('dom-module', DomModule);</code></p>
  
  <p>at <code>@polymer/polymer/lib/elements/dom-module.js?:178:16</code></p>
  
  <p>I'm attempting to setup a basic Polymer 3 project. I'm using Webpack with babel-loader to compile to es5. Because I'm compiling to es5, I'm including the <code>custom-elements-es5-adapter.js</code> along with <code>webcomponents-bundle.js</code> per instructions on the <a href="https://github.com/webcomponents/webcomponentsjs" rel="nofollow noreferrer">webcomponentsjs repo</a>. Those scripts are simply copied from node_modules to the output directory and the script tags are included in the html head.</p>
  
  <p>As for my component code, I'm creating separate js chunks for each polymer component as well as a separate chunk for shared imports which currently only includes Polymer. The compilation and code splitting works without error and the resulting chunks are added to the html before the closing body tag.</p>
  
  <p>The Webpack SplitChunks plugin pulls the <code>@polymer/polymer</code> imports into the separate chunk so that they are only included once.</p>
  
  <p>The goal is to have all required vendor code pulled into a common script and each component in a tiny chunk of it's own that can be selectively included.</p>
  
  <ul>
  <li>my-common.js (shared/common chunk)</li>
  <li>my-button.js (component chunk)</li>
  <li>my-tabs.js (component chunk)</li>
  <li>...more component chunks</li>
  </ul>
  
  <p>With my current setup, the chunks appear to be created correctly.</p>
  
  <p>In theory and based on what I've read so far, this should work but I'm completely stuck on this error.</p>
  
  <p><strong>If I bundle my component files together, everything works fine.</strong></p>
  
  <hr>
  
  <p><strong>Here's an example of one of my very simple component files:</strong></p>
  
  <pre><code>import { html, PolymerElement } from '@polymer/polymer';
  
  export default class MyButton extends PolymerElement {
    constructor() {
      super();
    }
  
    static get template() {
      return html`
        &lt;slot&gt;&lt;/slot&gt;
      `;
    }
  
    static get properties() {
      return { }
    }
  }
  
  customElements.define('my-button', MyButton);
  </code></pre>
  
  <p><strong>Here is the webpack config I've created for this proof of concept:</strong></p>
  
  <pre><code>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 &gt; 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'
    }
  };
  </code></pre>
  
  <p><strong>And here's the html:</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes"&gt;
    &lt;title&gt;polymer-3-sandbox&lt;/title&gt;
    &lt;meta name="description" content="A polymer 3 sandbox"&gt;
    &lt;link rel="manifest" href="/manifest.json"&gt;
    &lt;script src="/js/vendor/webcomponents-bundle.js"&gt;&lt;/script&gt;
    &lt;script src="/js/vendor/custom-elements-es5-adapter.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/my-common.js"&gt;&lt;/script&gt; 
    &lt;script type="text/javascript" src="js/my-button.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="js/my-tabs.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;    
    &lt;p&gt;
      &lt;my-button&gt;Learn More&lt;/my-button&gt;
    &lt;/p&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>