个人中心
gpt4 book ai didi

polymer 3.0.5 - "DOMException: Failed to execute ' 在 'CustomElementRegistry' 上定义“

转载 作者：行者123 更新时间：2023-12-02 10:43:23 27 4
gpt4 key购买 nike

我不认为这是一个重复的问题。我只将 @polymer/polymer 作为依赖项安装并导入到我的供应商包中(没有 @polymer/paper-input)。我使用的是 v3.0.5，我什至没有在依赖树中看到iron-meta(通过 npm 列表)，并且我的堆栈跟踪看起来不同 - 它指向polymer/lib/elements/dom-module.js

<小时/>

dom-module.js:178 Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry

跟踪指向此行customElements.define('dom-module', DomModule);

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

我正在尝试设置一个基本的 Polymer 3 项目。我使用 Webpack 和 babel-loader 来编译为 es5。因为我正在编译为 es5，所以我按照 webcomponentsjs repo 上的说明包含 custom-elements-es5-adapter.js 以及 webcomponents-bundle.js 。这些脚本只是从node_modules复制到输出目录，并且脚本标签包含在html头中。

对于我的组件代码，我正在为每个 polymer 组件创建单独的 js block ，并为共享导入创建单独的 block ，当前仅包含 polymer 。编译和代码分割工作没有错误，并且生成的 block 被添加到 html 结束 body 标记之前。

Webpack SplitChunks 插件将 @polymer/polymer 导入拉入单独的 block 中，以便它们仅包含一次。

目标是将所有必需的供应商代码放入一个通用脚本中，并将每个组件放入其自己的一小部分中，可以有选择地包含在内。

  • my-common.js(共享/公共(public) block )
  • my-button.js(组件 block )
  • my-tabs.js(组件 block )
  • ...更多组件 block

根据我当前的设置， block 似乎已正确创建。

从理论上讲，根据我到目前为止所读到的内容，这应该可行，但我完全陷入了这个错误。

如果我将组件文件捆绑在一起，一切都会正常工作。

<小时/>

这是我的一个非常简单的组件文件的示例:

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>

最佳答案

我们已经通过嵌套 polymer 去除脚本解决了这个问题，请检查 original github issue here .

诀窍是通过将以下内容添加到 package.json 文件来让 npm 运行 preinstall.sh 脚本:

  "scripts": {
    "preinstall": "../preinstall.sh"
  }

然后运行以下脚本，以无脚本方式安装 npm 两次以解决安装错误:

#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free

npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
  zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
npm i --ignore-scripts || true
if [ `ls node_modules/ | wc -l` -eq "0" ]; then
  zenity --error --text="ERROR : cb() never called\nrm node_modules and pacakge-lock.json and try again"
fi
. ../fixNestings.sh

最后，实际的嵌套移除脚本如下所示:

#!/bin/bash
# Author: Flatmax developers
# Date : 2018 10 17
# License : free

# The following function will remove nested directories, where $1 exists like so
# node_modules/.*/node_modules/$1
# @param $1 the module name to remove nestings of
function rmNestedMod(){
  name=$1
  paths=`find -L node_modules -name $1 | sed "s|^node_modules/||;s|/\$name$||" | grep node_modules`
  for p in $paths; do
    echo rm -rf node_modules/$p/$name
    rm -rf node_modules/$p/$name
  done
}

# remove all nested polymer namespaces
namespaces=`ls node_modules/@polymer/`
for n in $namespaces; do
  rmNestedMod "$n"
done

关于 polymer 3.0.5 - "DOMException: Failed to execute ' 在 'CustomElementRegistry' 上定义“，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51661041/

27 4 0
文章推荐： 火星 eclipse : How to Stop Updating Error Reporting Database
文章推荐： haskell - 简化 Haskell 代码
文章推荐： plone - 设置以编程方式创建的敏捷项目的字段默认值
文章推荐： doctrine - 使用 fetch-joined 集合限制 Doctrine 查询？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com