我不认为这是一个重复的问题。我只将@polymer/polymer 作为依赖项安装并导入到我的供应商包中（没有@polymer/paper-input）。我正在使用 v3.0.5，我什至没有在依赖树中看到 iron-meta（通过 npm 列表），而且我的堆栈跟踪看起来不同 - 它指向 polymer/lib/elements/dom-module.js
dom-module.js:178 未捕获的 DOMException：无法在“CustomElementRegistry”上执行“定义”：此名称已用于此注册表
跟踪指向这条线customElements.define('dom-module', DomModule);
在@polymer/polymer/lib/elements/dom-module.js?:178:16
我正在尝试设置一个基本的 Polymer 3 项目。我正在使用带有 babel-loader 的 Webpack 来编译到 es5。因为我正在编译到 es5，所以我将custom-elements-es5-adapter.js按照webcomponentsjs repowebcomponents-bundle.js上的说明包括在内。这些脚本只是从 node_modules 复制到输出目录，并且脚本标签包含在 html 头中。
至于我的组件代码，我正在为每个聚合物组件创建单独的 js 块，并为当前仅包含 Polymer 的共享导入创建单独的块。编译和代码拆分工作没有错误，生成的块被添加到结束 body 标记之前的 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);
这是我为这个概念验证创建的 webpack 配置：
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>