Troubleshooting

Root Element Issues

It is a requirement each Wire component template to have only one HTML element at the root.

Having multiple root elements will lead to unexpected and broken behavior.

This is wrong:

<div>

    Some content

</div>


<button wire:click="doSomething">Do Something</button>

Bellow is correct version(note that the button has been moved inside the root tag):

<div>

    <div>

        Some content

    </div>
 
    <button wire:click="doSomething">Do Something</button>

</div>

Typed property accessed before initialization

Error

Error: Typed property Drupal\...\Plugin\WireComponent\MyClass::$myProp
must not be accessed before initialization in ...

Solution

Add a default value when declaring public property

********************************** ************************* ************************ **************** ****************** *********** ************** ************* ************ *************