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

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

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