Tailwind and Alpine.js Versions?

[logrunner (Jon)]

What are the current versions of Tailwind and Alpine.js being used by Elements?

With the assistance of ChatGPT and Grok, I have developed a small component, outside of Elements, to use PHP to read a CSV file of calendar entries and use Alpine.js to display them in a container. I have tested this using MAMP and it works well.

I have now tried migrating the code into an Elements Custom Component and it is failing with a javascript error:

[Warning] Alpine Expression Error: null is not an object (evaluating 'e._x_dataStack=[t,...j(r||e)]') (alpine.js, line 1)
Expression: "allEventsFiltered"
 – 
<template x-for="(entry, index) in allEventsFiltered" :key="index">…</template>

The version of Alpine.js I am using is:
https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js

The version of Tailwind I am using is:
https://unpkg.com/tailwindcss@2.2.19/dist/tailwind.min.css

I thought I should get the versions of Alpine.js and Tailwind to be the same as Elements and make sure that it still works in MAMP before trying to debug this further in Elements?

Am I correct in assuming that it is alright to use Alpine.js x-init, x-data and x-for statements within an Elements component?

[bon]

Hi @logrunner,

you’re using older versions of both Tailwind and Alpine than we are in Elements.

Elements uses Alpine 3 - I suspect this is the root cause of the error you posted. You need to be using the latest version of Alpine 3.

We are currently on Tailwind 3, but are looking to upgrade to Tailwind 4 in the not too distant future.

Using Tailwind 2 might cause some styling issues, but should generally work - however, I would obviously recommend you use Tailwind version 3 for now.

[logrunner (Jon)]

Hi @bon,

I have changed the code to use Alpine.js 3 and Tailwind 3 and it continues to work OK in MAMP.

I still can’t get it to work in elements. I suspect it is something to do with a script function I have embedded in the inline code in the Custom Component template.

In the MAMP version, I have the code:

  <!-- Load AlpineJS v3 from JSDelivr -->
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <script>
    // Version 1.2.2
    function calendarApp() {
      return {
        events: <?php echo json_encode($groupedEvents, JSON_HEX_TAG); ?>,
        filter: '',
        allEventsFiltered: [],

...

In the Elements version I have removed the line that loads alpine.js, as I assume Alpine.js is already loaded:

  <!-- Load AlpineJS v3 from JSDelivr -->
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

I think ChatGPT / Grok recommended doing the ‘defer’ as it was causing problems not having it.

[bon]

none of your Alpine.js code will be executed within the Elements editor - you need to preview your site in an external browser for the javascript code to be executed.

Does that make sense? Let me know if I can help any further

[logrunner (Jon)]

Hi @bon,

I am testing the Elements version in Preview and via publishing to local files and viewing via MAMP. Both don’t work. The non-Elements version works in MAMP as per the image above.

I think it is some sort of timing issue as the errors I am getting imply (I think) that the alpine.js in the html code is trying to retrieve the data before it has been populated via the script which I guess is why there was a ‘defer’ when I was loading the script.

[bon]

@logrunner

In the Elements version I have removed the line that loads alpine.js, as I assume Alpine.js is already loaded:

Alpine will be loaded as long as you have at least one of the built in components on the page - so a Container or Grid or anything else built in.

[Bartje (bart vosters)]

@bon : Are there ways to work around this and still show the content in edit mode instead of only in preview? I don’t mind checking in preview mode, but if it’s possible to display it within Elements itself, that would add value.

[bon]

if your content is being fetched from somewhere with javascript, then unfortunately you can’t display that in Elements.

The solution here is to display some dummy data in edit mode only. This way you can set the styling in Elements, and when you preview your javascript can inject the fetched content dynamically.

Let me know if you need more information on how to do this!

[Bartje (bart vosters)]

@bon I have built several custom components to import data from Airtable tables. The result indeed matches what you describe: the styling is visible in edit mode and the full display only appears in preview.

So now I am certain that it cannot be done any other way and that I can finish these components as they are.