Hi,
This is my first post, so I’d like to start by saying THANKS to everyone involved in making Home Assistant - I’m amazed by its capabilities and the rate of development. And apologies if this isn’t the right forum for this kind of question.
I’ve created a custom component and a custom Lovelace card for a DIY project. All is working well, except that I’ve been unable to use the ha-textarea
or paper-textarea
Polymer elements in my Lovelace card. I can see them in the home-assistant-polymer
repository, but the code that defines them is not being run. Because it has been chunked by Webpack, I’m not sure I could safely identify and import the right module.
I’ve tried using Node.js for my custom card, creating an npm package with a dependency on home-assistant-polymer
. That way I can import @polymer/paper-input/paper-input.js
or home-assistant-frontend/src/components/ha-textarea.js
. But if I bundle my package using Webpack, and include it as a resource in the Lovelace config YAML, I get a browser error:
Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry at Module../node_modules/@polymer/polymer/lib/elements/dom-module.js
As far as I understand, my problem is that my bundled script is illegally trying to define the dom-module
custom element (and presumably other), when they’ve already been defined separately in hass-frontend
and my module. Because the two projects are bundled separately, there’s no de-duplication at the build stage. At the moment I can’t see any way to avoid this… unless I can do something with Webpack Externals?
I’m new to most of this, so hopefully I’m just missing something. Can anyone help, please? I’d really rather not fork home-assistant-polymer
.
Thanks,
Adam