Error: element could not render due to invalid template markup

Support
#1

Hi!

I’m having this nag screen when I try to visit text elements on my page: This element could not render due to invalid template markup. This could be due to changes introduced by a third party plugin. The front end of your site should still function normally.

I got rid of it lately when I deleted and rebuilt the text elements on the page, but now the problem is back.

Any advice on this?

Cheers

#2

Hi Jarkko,

Thanks for providing the login credentials. I checked the page you mentioned and found some javascript errors that were preventing the page from loading at all. I disabled Javascript minification and was able to get the page to load and see the error message you’re describing.

If you switch to skeleton mode from the icon in the bar you can inspect elements that are not showing correctly in the preview. I checked this way and can see you have a shortcode in that text element for an event plugin. This is the cause of the invalid markup.

Anytime we see the error about invalid template we can find out more info by opening the developer tools and looking at the console. Specifically, the builder is having a hard time processing some invalid markup being output by that plugin. The builder will check anything that it needs to display for HTML syntax errors. This is because if we try to add invalid HTML into the live preview it could break other elements or the entire preview. Most browsers can handle invalid HTML and still show a correct result on the front end of a site but it’s more difficult to manage when you’re constructing the page in a live preview environment.

The specific error we’ve encountered is because your plugin is outputting a closing </meta> tag. The meta tag is what is considered a “void element” and it should not have a closing tag as it could never have content (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta).

This isn’t actually a problem since the front end of your site should continue to function. Unfortunately there isn’t much we can do to make it display correctly in the preview. You could bring this information to the attention of the plugin developers who authored the shortcode you’re using. They might be able to advise a solution or shed further light on the situation.

Hopefully this helps explain what’s going on here!

1 Like
#3

Thank you for the comprehensive answer and inspecting the source of the problem! I will let the plugin developer know and let’s see what happens :slight_smile:

#4

You are most welcome, Jarkko.

Have a nice weekend.

#5

Hi! The plugin developer asked the following: “I am not exactly sure what closing tag this is related to. Is there any way you can share a code line number where this is or screenshot that narrows this down?”

Can you help pinpointing the problematic line?

Cheers!

#6

I grabbed the output of your plugin’s shortcode (see secure note) and pasted it in https://htmlhint.io/

It also has broken anchor.

Hope that helps.

1 Like
#7

Thanks! Very very nice! :slight_smile:

I continue working out the problem with the plugin developer!

Cheers

#8

Hey Jarkko,

We’re happy to help. However, this is the plugin developer’s job to investigate the bugs of his plugin. The builder will only prevent the preview of third party code if it finds an issue with it or a conflict.

Alex said previously that the meta tag should not have a closing tag.

Regretfully, there’s nothing more we can advice.

I hope you understand.

#9

Thanks! I will try to continue working on the issue with the plugin developer and hopefully the problem gets fixed :slight_smile:

Cheers

#10

You’re welcome! :slight_smile:

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.