I wanted to try and use a custom web component I made using vanilla javascript with npm. So I published it to npm to import it into another learning thing I am working on. My problem was that my environment didn't recognize the custom element.

My package.json defined main to be the 'index.js' file. The file defined the component using the standard customElements.define. This element didn't seem to be registered when I wanted to use it.

My current hack workaround is

class CustomElement { ... }
function defineCustomElement() { 
  customElements.define('tag-name', CustomElement)
}
export default defineCustomElement

This feels like a horrible hack though. When I search around, I don't see my problem mentioned and I can't manage to find any good information, so I'm probably missing something on what I should be searching for/looking at.

My goal would be that by just defining the component as a dependency in package.json it would automatically be defined.

Could someone please help?