Copy as HubL: escaping and formatting are broken

Developer Support CMS Development
,
1

I created a page in the app’s CMS page builder, and I want to save it as a HTML template in my theme. I enable developerMode and use the “copy as HubL” feature to copy the content of each section, then I go to Design Manager to place it into an HTML template in my theme. The copied HubL throws error messages in design manager, and I can’t read them because the design manager error log is also broken.

1. Invalid Escape Sequence

The first error I got from the console is “invalid escape sequence.” Why is this the case when the HubL is copied directly from the page? When I copy the HubL from an existing page, can’t I then re-insert that same HubL into an HTML document for use in a HubSpot theme?

170910i49D74A1BC1FCC585.png
170910i49D74A1BC1FCC585.png400×191 32.6 KB

2. Error Parsing JSON

I’m copying directly from a published page. The JSON is parsed right there on a page. My expectation is that I can copy the exact same code being used to render a CMS page and duplicate it as a template. I have to believe this is a glitch or broken because I genuinely can’t understand why a certain arrangement of Modules with certain data in their Fields render just fine in one side of CMS, but not on another side.

170909iEA8F0AE7B679F7A6.png
170909iEA8F0AE7B679F7A6.png400×194 45.9 KB

3. The error console is broken

See screenshot above. Reading the error logs is actually impossible. It’s not possible to scroll down and it’s clearly visible that the messages are colliding. I can’t even read the errors without wrestling to copy and paste the content into a notepad.
Please let me know if there’s something I’m missing or if this is a confirmed bug. If it’s a bug, I’d like to know what’s being done to fix this. Again, I think that a reasonable expectation is that “copy as HubL → paste in HTML file → publish” is the extent of this process.

2

Hi @EGold64,

Your screenshots are coming through very small and it is not possible to see any details. It would be helpful to the community if you could provide higher resolution screenshots.

Confirming that the “Copy as HubL” functionality works fine for me.

Without seeing the full code, just making a guess it could be some conflicts caused by the destination template.

Have you tried using a very plain template like this and dropping in a copied section?

<!--
 templateType: page
 label: TEST TEMPLATE
 isAvailableForNewContent: true
-->
<!doctype html>
<html>
 <head>
 <meta charset="utf-8">
 <title>{{ content.html_title }}</title>
 <meta name="description" content="{{ content.meta_description }}">
 {{ standard_header_includes }}
 </head>
 <body>

 {# DROP COPIED HUBL HERE #}

 {{ standard_footer_includes }}
 </body>
</html>
3

Hi @evaldas, thank you for your reply--I’m going to try that. BTW, unfortunately this post is a duplicate; it was marked as spam so I re-posted this question in this thread:

https://community.hubspot.com/t5/CMS-Development/Copy-as-HubL-escaping-and-formatting-is-broken/td-p/1263563

I’d appreciate your continued help in that thread, if you have the time. Also, I’ll make sure to add high-res screenshots there as well.

4

I created a page in the app’s CMS page builder, and I want to save it as a HTML template in my theme. I enable developerMode and use the “copy as HubL” feature to copy the content of each section, then I go to Design Manager to place it into an HTML template in my theme. The copied HubL throws error messages in design manager, and I can’t read them because the design manager error log is also broken.

1. Invalid Escape Sequence

The first error I got from the console is “invalid escape sequence.” Ok, fair enough, but why is this the case when the HubL is copied directly from the page? Is it not reasonable to assume that when I copy the HubL form a page that is rendering perfectly, I can then re-insert that same HubL into an HTML document for use in a HubSpot theme? As a user, my goal is to be able to copy the HubL and place it into a theme file, then get back to work.

2. Error Parsing JSON

At the risk of sounding repetitive, once again, I’m copying directly from a published page. The JSON is literally parsed right before my eyes. My expectation is that I can copy the exact same code being used to render a CMS page and duplicate it as a template. I have to believe this is a glitch or broken because I genuinely can’t understand why a certain arrangement of Modules with certain data in their Fields render just fine in one side of CMS, but not on another side.

EGold64_1-1774980075865.jpg
EGold64_1-1774980075865.jpg998×483 83.7 KB

3. The error console is broken

See screenshot above. Reading the error logs is actually impossible. It’s not possible to scroll down and it’s clearly visible that the messages are colliding. I can’t even read the errors without wrestling to copy and paste the content into a notepad.
Please let me know if there’s something I’m missing or if this is a confirmed bug. If it’s a bug, I’d like to know what’s being done to fix this. Again, I think that a reasonable expectation is that “copy as HubL → paste in HTML file → publish” is the extent of this process.

5

Hey @EGold64,
Thanks for posting in the Community!
I’d like to tag in some Community experts to see what insight they may have on these errors, as well as how to resolve them! @Anton, @EValdes, and @stefen - do you have any thoughts on this inquiry?
Shane, Senior Community Moderator

6

Hey @EGold64,

your approach is correct.

As I can’t recreate this in any of my portals, can you share a bit more info about your setup?

  • What theme are you using? (Marketplace, Default, Custom, Child-theme of marketplace/default)
  • Are you using custom modules?
  • Are you using some unusual content in (custom) modules? (i.e: svg code in choice-field values…)
  • What is the {{ super() }} in the {% block header %} doing?

best,

Anton

7

Hi @Anton, thank you for your help:

  1. I’m using a Child Theme of Clean Pro from HS Marketplace
  2. Not for this template, no
  3. The modules in this theme have a lot of options so it’s entirely possible something like that is in there, I will look. But from my end everything is rich text, links to some documents, and a few images.
  4. That actually wasn’t needed in this template so I removed it (but no impact). Thanks for catching that.

In other words: With a Child theme of Clean Pro, I added a bunch of modules to a page, applied some content and style options to them, then hit this road block with the HubL export.

8

Hey @EGold64,
Thanks for confirming this context! I’m re-tagging @Anton for visibility.
Shane, Senior Community Moderator

9

Here are (hopefully) higher res screenshots.
Escape sequence error:

HubSpot Template Error - escape error msg.png
HubSpot Template Error - escape error msg.png972×306 7.8 KB

Error console message (parse error + broken console):

HubSpot Template Error.jpg
HubSpot Template Error.jpg2476×1189 362 KB

10

Hi @EGold64,

Did not realize this was a duplicate post. Looks like @STierney has consolidated into one now and I see @Anton had asked some good questions already.

It sounds like in your response to Anton’s question regarding custom modules, you are saying that you aren’t utilizing any custom modules (only the standard ones). However, I see in you screenshot a custom module referenced, called “CLEAN Pro - Magic Module”. So that might be something worth doublechecking in your HubL.

Also, I tried copying HubL in a marketplace child theme from multiple sections that contain default modules and try to break the template on purpose to give me similar errors to what you are getting but did not have success there.

If this is one huge single section you are trying to copy over, then I would suggest cloning the page, moving modules from a single section into separate smaller sections, then copying those smaller sections into the template to see which piece of this puzzle might be triggering the error.

11

Hi @evaldas, thanks for the reply. I didn’t interpret the custom modules question correctly - the modules are the ones that shipped with the theme we are using, so in that context, yes they would be “custom” relative to HubSpot’s default modules. My mistake. I was thinking along the lines of “I have not customized the theme’s modules.”
Where I am at a loss is this Marketplace Theme’s modules work fine on the page in the GUI editor. They are throwing no errors. The errors only come when trying to copy the HubL into a template to use elsewhere. Is it possible this is just an issue with how that marketplace theme was written/created? I’m at a loss and everything being suggested has taken me nowhere, unfortunately.

At this point saving a page as a draft and cloning it is less work than using the template creation process. @hubspot this shouldn’t be this comlplicated!

12

Hi @EGold64,

Thank you for clarifying. In the HubSpot ecosystem, the term “custom module” refers to any module that is not a default HubSpot module (i.e. Rich Text, Image, etc) - so that distinction should help in case you post more questions or your research in the future :slightly_smiling_face: There are some themes that utilize only default modules but it is common to see custom modules that work only within a specific theme.

In this case, yes it might be possible that these errors are happening because of the way the theme was built. It is not necessarily that the developers did something wrong, often these custom modules can have very advanced settings and may have not been tested in the “copy as HubL” use case. It is a bit of a hidden feature after all.

Since you have a professional licence of the marketplace theme, I would recommend also reaching out to the theme’s support and see if they have any suggestions or comments. Ideally, the creator would either remedy the issue or connect with HubSpot to try and identify any bugs that are affecting capabilities of their theme.