It appears that the issue you're encountering is related to Livewire's morphdom JavaScript library, which is responsible for efficiently updating the DOM to reflect the state of your Livewire components. The comments you're seeing (<!--[if BLOCK]><![endif]-->) are likely placeholders used by Livewire to manage conditional rendering in the DOM.
To resolve the issue, you can try a couple of approaches:
-
Use Livewire's
@entangledirective: If you're trying to bind a JavaScript variable to a Livewire property, you can use the@entangledirective to create a reactive bridge between Livewire and Alpine.js (or vanilla JavaScript). -
Refactor your Blade template: Instead of embedding the conditional logic directly within the JavaScript object, you can assign the center coordinates to a JavaScript variable before the map initialization and then use that variable within the map configuration.
Here's an example of how you might refactor your Blade template:
<script>
// Define the center coordinates before initializing the map
var centerCoordinates = @json($last_lnglat ? $last_lnglat : [135, -25]);
var map = new mapboxgl.Map({
container: 'mapBox',
style: defaultStyle,
center: centerCoordinates,
zoom: 12,
projection: 'mercator',
attributionControl: false,
maxPitch: 60,
antialias: true,
});
</script>
In this example, we use the @json directive to safely output the PHP variable as a JSON-encoded JavaScript variable. This approach avoids the need for inline @if statements within the JavaScript object and should prevent the issues you're experiencing with Livewire's DOM diffing.
If you continue to experience issues, make sure to check the Livewire documentation for any changes related to conditional rendering in Blade templates, as Livewire 3 may have introduced changes that affect how these are handled. Additionally, ensure that your Livewire components and scripts are up to date and that there are no JavaScript errors in the console that could be causing unexpected behavior.
