Troubleshooting

Overview

As you use CBWIRE, you are likely to run into issues from time to time. The most common issues are rendering issues. Here, we try to address the most common problems and show how to solve them.

CBWIRE

Lazy-loaded components with placeholders don't render

Consider the following widget example.

// ./wires/Widget.cfc
component extends="cbwire.models.Component" {
    function placeholder() {
        return "<section>put spinner here...</section>";
    }
}

<!--- ./wires/widget.cfm --->
<cfoutput>
    <div>
        <h1>My Widget</h1>
    </div>
</cfoutput>

Let's include our widget somewhere on our site and add lazy loading.

<cfoutput>#wire( name="Widget", lazy=true )#</cfoutput>

What should happen on page load is our placeholder is shown first, and then our widget renders to the page. Instead, we get a weird error like this.

Snapshot missing on Livewire component with id K8SDFLSDF902KSDFLASKJFASDFLJ.

The Livewire JavaScript error isn't super helpful in identifying the problem because the real issue is a mismatch between your widget's outer element and its placeholder's outer element.

Notice our widget's template above has an outer <div> but our placeholder has an outer <section> element. This will not work. Your placeholder and your corresponding template must have the same outer element. Otherwise, Livewire's DOM diffing engine gets confused.

The fix would be to make them both have outer <div> tags.

// ./wires/Widget.cfc
component extends="cbwire.models.Component" {
    function placeholder() {
        return "<div>put spinner here...</div>";
    }
}

<!--- ./wires/widget.cfm --->
<cfoutput>
    <div>
        <h1>My Widget</h1>
    </div>
</cfoutput>

Fix Rendering Conditionals with <!---[if BLOCK]>

When an Action is executed on your components, the component is re-rendered, and then it's Livewire's job to figure out how to update the DOM. For the most part, the DOM updates are completed without issue. However, you may run into problems with conditional areas ( if-else statements ) in your Templates.

Consider the following:

<div>
    <h1>My Form</h1>
    <cfif ArrayLen( errorList )>
        <div class="alert alert-danger" role="alert">
            <p>An error occured.</p>
            <ul>
                <cfloop array="#errorList#" index="error">
                    <li>#error#</li>
                </cfloop>
            </ul>
        </div>
    </cfif>
    ....
</div>

Notice we have an alert that is displayed when there are errors in our errorListvariable.

Depending on the additional sections within your page and how deeply nested each section is, Livewire might have difficulty detecting the alert has been added on re-rendering and that a DOM update is required.

We can let Livewire know there is a conditional section by adding an if-BLOCK comment.

<!--[if BLOCK]><![endif]-->
....
<!--[if ENDBLOCK]><![endif]-->

<div>
    <h1>My Form</h1>
    <!--[if BLOCK]><![endif]-->
    <cfif ArrayLen( errorList )>
        <div class="alert alert-danger" role="alert">
            <p>An error occured.</p>
            <ul>
                <cfloop array="#errorList#" index="error">
                    <li>#error#</li>
                </cfloop>
            </ul>
        </div>
    </cfif>
    <!--[if ENDBLOCK]><![endif]-->
    ....
</div>

Alpine.js

Nothing is working

While Alpine is lightweight and simple to use, it's easy to get tripped up when getting started.

See if you can spot what is wrong with this code.

<!--- ./wires/counter.cfm --->
<cfoutput>
    <div
        x-data="{
            name: "CBWIRE"
        }">
        <div>Name: <span x-text="name"></span></div>
    </div>
</cfoutput>

The code above will result in a JavaScript error.

The problem is our use of double quotes for our name property. Because our x-data block is surrounded by double quotes, using double quotes inside the block isn't proper syntax.

Change to using single quotes instead, and all is well again.

<!--- ./wires/counter.cfm --->
<cfoutput>
    <div
        x-data="{
            name: 'CBWIRE'
        }">
        <div>Name: <span x-text="name"></span></div>
    </div>
</cfoutput>

We recommend always using single quotes inside your x-data block.

Unable to find component error

You can run into rendering issues when using Alpine's <template> tag with an x-if if you are also including a component within the tag using wire().

For example:

<cfoutput>
    <div x-data="{
        loading: false,
        async init() {
            this.loading = true
            await $wire.someAction()
            this.loading = false
        }
    }">
        <template x-if="loading">
            #wire( "Spinner" )#
        </template>
    </div>
</cfoutput>

As you toggle the loading value from true to false, you may see a JavaScript error similar to this. The component ID will be different

Unable to find component K8SDFLSDF902KSDFLASKJFASDFLJ.

The issue above is that Alpine.js' x-if directive completely removes the contents inside from the DOM and recreates them when true. Livewire.js' DOM diffing engine is expecting the spinner to be there, and it can't find it, hence the error.

Luckily, the simple fix is to change your <template x-if> to something like a <div> and use x-show instead.

<cfoutput>
    <div x-show="loading">
        #wire( "Spinner" )
    </div>
</cfoutput>

You'll still achieve the desired result and Livewire.js can track the spinner accurately.