Search code examples
javascriptreactjsweb-component

React18 with webcomponents causing Uncaught TypeError: Cannot set property shadowRoot of #<Element> which has only a gette

I have a react18 application written in pure js (not ts). I've imported a webcomponent from another project that causes the following error:

Uncaught TypeError: Cannot set property shadowRoot of #<Element> which has only a getter


class ExampleComponent extends HTMLElement {

    shadowRoot
    
    constructor() {
        super()
        this.shadowRoot = this.attachShadow({mode: 'open'})
    }
    ...
}


window.customElements.define('example-component', ExampleComponent)

Does anybody know why this happens? Sorry I can't give you full code example due to company legals.

Solution

  • The Problem was that shadowRoot should be named to #shadowRoot. Just add a # to shadowRoot. Don't ask me why but this fixed my problem.