我不认为这是一个重复的问题 . 我只将@聚合物/聚合物作为依赖项安装并导入到我的供应商包中(没有@ polymer / paper-input) . 我正在使用v3.0.5,我甚至没有在依赖树中看到iron-meta(通过npm列表),我的堆栈跟踪看起来不同 - 它指向聚合物/ lib / elements / dom-module.js
dom-module.js:178未捕获DOMException:无法在'CustomElementRegistry'上执行'define':此名称已与此注册表一起使用
跟踪指向此行 customElements.define('dom-module', DomModule);
在 @polymer/polymer/lib/elements/dom-module.js?:178:16
我'm attempting to setup a basic Polymer 3 project. I'使用带有babel-loader的Webpack编译成es5 . 因为'm compiling to es5, I' m包括 custom-elements-es5-adapter.js
以及 webcomponents-bundle.js
每个指令 webcomponents-bundle.js
. 这些脚本只是从node_modules复制到输出目录,脚本标记包含在html头中 .
至于我的组件代码,我正在为每个聚合物组件创建单独的js块,以及为共享导入创建单独的块,目前只包含Polymer . 编译和代码拆分无错误地生成,并且生成的块将添加到关闭正文标记之前的html中 .
Webpack SplitChunks插件将 @polymer/polymer
导入拉入单独的块中,以便它们仅包含一次 .
目标是将所有必需的供应商代码拉入一个共同的脚本,并且每个组件都可以选择性地包含在其自身的一小部分中 .
-
my-common.js(共享/公共块)
-
my-button.js(组件块)
-
my-tabs.js(组件块)
-
...更多组件块
使用我当前的设置,块似乎正确创建 .
从理论上讲,基于我到目前为止所读到的内容,这应该可行,但我完全坚持这个错误 .
If I bundle my component files together, everything works fine.
Here's an example of one of my very simple component files:
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);
Here is the webpack config I've created for this proof of concept:
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'
}
};
And here's the 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>
1 回答
我们用嵌套的聚合物去除脚本解决了这个问题,检查original github issue here .
诀窍是通过将以下内容添加到package.json文件来使npm运行preinstall.sh脚本:
然后运行以下脚本,安装npm无脚本两次以解决安装错误:
最后,实际的嵌套删除脚本是这样的: