1

I am making a lib similar to Polymer Material. I have individual files I use rollup to create a single ESM, CJS, and UMD file. The ESM file is the main in the package.json. I have a situation like this

Header
  Icon-Button
Icon-Button

The icon button Uses Mustache so I need to include it using the rollup-plugin-node-resolve. I then import the library in Header and create a UMD file that is imported into my we app like this...

// Pug
script(src="/ui-components/header/dist/index.umd.js")
script(src="/ui-components/icon-button/dist/index.umd.js")

// Express
// @me/icon-button
// @me/header
const uiPath = path.join(__dirname, './node_modules/@me');
app.use('/ui-components', express.static(uiPath));

I get the following in the browser console on load...

Failed to execute 'define' on 'CustomElementRegistry': the name "me-icon-button" has already been used with this registry

How do libraries handle this? I thought about removing the resolve plugin for mustache and assuming it is included globally. However, it seems pretty onerous to make everyone find a way to import mustache into window and not something most libraries do. I could also do something like this question suggests...

customElements.get("me-icon-button")||customElements.define("me-icon-button", IconButton, {...});

But having that multiple times in my code does not seem right either.

So How do I include multiple web components that reference other similar components?

JGleason
  • 3,067
  • 6
  • 20
  • 54
  • with JS module import – Supersharp Dec 12 '19 at 18:54
  • Can you expand? Even if I run as ESM modules (which I am not sure fully works given the dep support) this still gets ran 2x. So for example if I load the ESM version of Header it says it can't load the icon-button without using something like a global (says it needs to start with / or ./ etc). Also this is UMD which does not use type=module. So I am a bit confused as to how this sentence helps. – JGleason Dec 13 '19 at 16:39

0 Answers0