Uncaught TypeError: Cannot read property 'define' of null

[parasharrajat]

I am creating a browser extension and I am using HyperHTML for content-scripts. Normally with bind everythings works but for encapsulation I want to try hyperHTML-elment. I am getting this error on console.

Uncaught TypeError: Cannot read property 'define' of null
    at Function.define (contentscript.js:1956)
    at Module.<anonymous> (contentscript.js:4512)
    at Module../scripts/contentscript.js (contentscript.js:4568)
    at __webpack_require__ (contentscript.js:20)
    at contentscript.js:84
    at contentscript.js:87

Source code is

class Counter extends HyperHTMLElement {
  get defaultState() {
    return { css: 'font-weight:bold;', count: 0 };
  }
  constructor(count) {
    super();
    this.html = this.bind(this.attachShadow({ mode: 'open' }));
    this.setState({ count });
  }
  onclick() {
    this.setState(prev => ({ count: prev.count + 1 }));
  }
  render() {
    return this.html`
      <button style=${this.state.css} onclick=${this}>
        ${this.state.count}
      </button>`;
  }
}
Counter.define('counter-div', { extends: 'div' });
function DOM() {
  const ch = document.createElement('Counter');
  root.appendChild(ch)
}

I found the root casue here customElements is null here

setPrototypeOf(Class, Intermediate);
      setPrototypeOf(proto, Intermediate.prototype);
      customElements.define(name, Class, options);

My browser is

Google Chrome
Version 83.0.4103.116 (Official Build) (64-bit)

[WebReflection]

I think you're using the wrong polyfill, try this one instead.

https://github.com/WebReflection/custom-elements#readme

[parasharrajat]

Sorry for this issue.

I just found out that chrome does not support custom-elements for the content-scripts. So I am using polyfill @webcomponents/custom-elements as a work around.

Thanks for such an awesome framework or Tagged templates Literals.

[WebReflection]

In ABP (million users) we use HyperHTMLELement with this polyfill, and it's been 2+ years, and we cover pretty much every old to modern browser.

That being said, I can't remember if we use it in content script, but you need to change polyfill and/or file an issue to the polyfill you are using, as there's nothing I can do here, if that polyfill doesn't work as expected.

My polyfills, both of them, should work though, specially the latter one, as I think content script allows MutationObserver, and that's what the first suggested polyfill is based on.

[WebReflection]

P.S. if you'd like to know more about the history of my polyfills, those that have been deployed the most in production, this blog post might help https://medium.com/@WebReflection/some-custom-elements-update-376317dd7862 👋