Alpine Expression Error: Invalid or unexpected token

[tiago-123]

Hello,

I am trying to conditionally set an element to open or closed based on whether the user is on a mobile device or not.

This is the HTML code:

<div
	x-data="{ open: false }"
	x-init="open = window.innerWidth >= 1024"
	class="order-first lg:order-last mb-8">
	<div x-on:click="open = !open" class="relative flex items-center justify-between mb-4">
		<h3 class="text-lg font-medium" id="order_review_heading">Resumo do pedido</h3>
		<span x-bind:class="open ? 'rotate-180' : ''" class="transition-transform duration-200 lg:!hidden">
			<svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
			</svg>
		</span>
		<span class="absolute -inset-2 lg:!hidden"></span>
	</div>

	<div x-cloak x-collapse.duration.300ms x-show="open" id="order_review" class="woocommerce-checkout-review-order">
		<?php wc_get_template('checkout/review-order.php'); ?>
	</div>
</div>

The above code produces the following error:

Alpine Expression Error: Invalid or unexpected token

Expression: "open = window.innerWidth >= 1024″
			class=”order-first lg:order-last mb-8″>
			<div x-on:click="

If I change the x-init directive to x-init="open = true", the error then disappears and the code runs smoothly.

[tiago-123]

This alternative works fine:

<div
	x-data="{ open: false, isMobile: window.innerWidth < 1024 }"
	x-init="if (!isMobile) open = true"
	class="order-first lg:order-last mb-8">
	<div x-on:click="open = !open" class="relative flex items-center justify-between mb-4">
		<h3 class="text-lg font-medium" id="order_review_heading">Resumo do pedido</h3>
		<span x-bind:class="open ? 'rotate-180' : ''" class="transition-transform duration-200 lg:!hidden">
			<svg class="size-5" fill="none" viewBox="0 0 24 24" stroke-width="1.25" stroke="currentColor">
				<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
			</svg>
		</span>
		<span class="absolute -inset-2 lg:!hidden"></span>
	</div>

	<div x-cloak x-collapse.duration.300ms x-show="open" id="order_review" class="woocommerce-checkout-review-order">
		<?php wc_get_template('checkout/review-order.php'); ?>
	</div>
</div>

[ekwoka]

The issue is pretty clear in your error, you are using incorrect " characters for some reason.

[tiago-123]

I am definitely NOT using wrong quotes, that's only the error that is being produced. As I mentioned, if I just change x-init="open = window.innerWidth >= 1024" to x-init="open = true", the error disappears.