6 months ago

Laravel Mix / Vue Async Component Race Condition

Posted 6 months ago by trip.somers

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.

Please sign in or create an account to participate in this conversation.