Laravel Mix / Vue Async Component Race Condition

I have recently grown my front-end to the point where I need to convert my component loading to async. This has all gone very well so far except that the async components are not always rendering. There appears to be a race condition related to when the components are processed on an initial page load.

I am using v5.0.4 of Mix with Laravel 5.8 and Vue 2.6.11.

Based on console logging, the components successfully mount on every page load. When a component fail to render, there are no console errors, and the DOM where the component tag was is just empty. Inspecting the resulting DOM, the component tag in the HTML has been removed, but the component template has not been injected in its place.

With the dev build from npm run watch, usually none of the async components are rendered. About 1 out of 20 times, either the first component or both components will render. The second has never rendered without the first.
With the prod build from npm run prod, usually all of the async components are rendered. About 1 out of 20 times, neither will render. I suspect the issue here is the same but the race condition is narrower with a prod build.

I cannot figure out what the race condition is, so I don't know what to do next. I do not understand how the components can always mount but not always render. I'm looking for someone to shed light on any part of this.

The only thing that kind of makes sense is that the async components are somehow mounting before the renderer is ready. Is that even a thing that can happen?

EDIT: Combined my original post with two replies to clarify problem as I currently understand it.

trip.somers

6 years ago

Best Answer

Level 3

SOLUTION

It appears that the async components were being requested before Vue was actually ready for them. That doesn't really seem possible to me, but it is what it is, I suppose.

const app = new Vue({
    el: '#app',
    data: {
        ready: false
    },
    mounted() {
        this.ready = true
    }
});

Inside of the <div id="app"> DOM element, my main content div now has a v-if="ready" directive. This apparently gives Vue the time it needs to appropriately handle the async components.

Everything appears to be working as expected now. Hopefully someone else can benefit from these notes.

Please or to participate in this conversation.