# Alpinejs issue in Custom Module

**URL:** <https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762>\
**Category:** CMS Development\
**Created:** [May 21, 2021, 9:18pm UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762 "2021-05-21T21:18:44Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![tmcmillan99](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tmcmillan99/32/93181_2.png) [@tmcmillan99](https://community.hubspot.com/u/tmcmillan99)\
**Post date:** [May 21, 2021, 9:18pm UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762/1 "2021-05-21T21:18:44Z")

</div>

Dealing with an issue and thought I would reach out here first just in case someone can help.

I have created a image slider as a custom module using Alpinejs for the functionality. Each image is group with a rich text field. The slider functions as it should, however, dumping the rich text field into my Alpinejs array is causing a syntax error. I am not sure how to resolve it.

Here is the code. As you can see, I am putting the rich text field contents into the caption object using the module hubl tag from the image group.

```lia-code-sample
 <div class="w-full max-w-6xl mx-auto relative"
 x-data="{
 selected: 0,
 images: [
 {
 src: '{{ module.image1_group.image1.src }}',
 alt: '{{ module.image1_group.image1.alt }}',
 caption: '{{ module.image1_group.rich_text1 }}'
 },
 {
 src: '{{ module.image2_group.image2.src }}',
 alt: '{{ module.image2_group.image2.alt }}',
 caption: 'Sample text2 goes here'
 },
 {
 src: '{{ module.image3_group.image3.src }}',
 alt: '{{ module.image3_group.image3.alt }}',
 caption: 'Sample text3 goes here'
 },
 {
 src: '{{ module.image4_group.image4.src }}',
 alt: '{{ module.image4_group.image4.alt }}',
 caption: 'Sample text4 goes here'
 },
 {
 src: '{{ module.image5_group.image5.src }}',
 alt: '{{ module.image5_group.image5.alt }}',
 caption: 'Sample text5 goes here'
 },
 {
 src: '{{ module.image6_group.image6.src }}',
 alt: '{{ module.image6_group.image6.alt }}',
 caption: 'Sample text6 goes here'
 },
 ]
 }">

```

As is, it’s causing the Alpinejs syntax error. If I manually type the html in, it works fine. Hubspot must be including some syntax and/or characters that Alpine doesn’t like and that I can’t see.

Any ideas on how I might be able to resolve this?

Thanks,

Terry McMillan

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [May 22, 2021, 8:17pm UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762/2 "2021-05-22T20:17:57Z")

</div>

What’s the output look like and what’s error you’re getting?  
I’m guessing that the values being printed might include quote or something and that would break the object you’re creating.

---

<div class="post-metadata">

**Author:** ![tmcmillan99](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tmcmillan99/32/93181_2.png) [@tmcmillan99](https://community.hubspot.com/u/tmcmillan99)\
**Post date:** [May 24, 2021, 12:07am UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762/3 "2021-05-24T00:07:25Z")

</div>

Based on testing, if I just have basic paragraph text in the rich text module, it works without any errors. However, as soon as I add a heading or link, it causes the syntax error. I have attached a screeshot of my dev tools console showing the errors as well as the output in the array from the module. You can see in my highlighted area, I added the H2 heading. It appears that Alpinejs doesn’t like the line break that Hubspot is adding after the H2. If I manually type the same H2 & p code in the array with no line break, it works correctly. Not sure how to resolve this, if that’s possible. Obviously, the goal is for the end-user to be able to use the rich text module as intended. If I can’t get this resolved soon, I will explore the option of using some sort of JQuery slider with the same type of functionality.

 ![console-error.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/0/00223214690033a122580b3959bcc638ac29012a.png)

Thanks,

Terry

---

<div class="post-metadata">

**Author:** ![Kevin-C](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kevin-c/32/34570_2.png) [@Kevin-C](https://community.hubspot.com/u/Kevin-C)\
**Post date:** [May 24, 2021, 2:05am UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762/4 "2021-05-24T02:05:05Z")

</div>

Ah yeah to avoid this you could try using regex\_replace to replace all of the new  
line characters with an empty string.  
{{ value|regex\_replace(“/(\r\n)+|\r+|\n+/”, “”) }}  
FYI I grabbed that regex from SO and haven’t tested it but it should match all types of new line and returns.

---

<div class="post-metadata">

**Author:** ![tmcmillan99](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tmcmillan99/32/93181_2.png) [@tmcmillan99](https://community.hubspot.com/u/tmcmillan99)\
**Post date:** [May 25, 2021, 3:25pm UTC](https://community.hubspot.com/t/alpinejs-issue-in-custom-module/37762/5 "2021-05-25T15:25:41Z")

</div>

Update - After some additional testing, I was not able to resolve the above issue. As a result, came up with another option that still uses Alpinejs and has the same functionality. The new option eliminates the need for an array.

Kevin - I appreciate the suggestions you taking the time answer my post.

Thanks,

Terry