Troubleshooting

Root Element Issues

It is a requirement for 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 the 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

Query string not persisting on page refresh

Most likely, you rendered HTML is being cached.

Use CacheTrait and make usage of it on mount hook

Uncaught (in promise) TypeError: this.messageInTransit is undefined

This error could be caused by Mixed content

If you're behind a reverse proxy environment you should ensure that HTTPS is on and the content of w-app-url meta tags has https in is