Ghost embedded Javascript not rendering with Gatsby

Developer help
1

I’m learning Ghost and Gatsby to create a blog site. I created a blog post with and HTML section that has embedded Javascript (the HTML is a Shopify 'buy now button). When the post is processed by Gatsby the Javascript is not run. I know this sounds like an issue in Gatsby, but I wanted to ask here in case this is a common error or if another static generator would be a better choice to successfully execute the javascript on the client.

Note if I take the resulting HTML from the Chrome Elements console, save it to a file and open the file in Chrome the javascript runs and is rendered correctly.

What are the best practices for getting Ghost HTML/embedded scripts to render with static generators?

Ghost-CLI version: 1.13.1
Using both Chrome and Safari

2

I ended up using dangerously-set-html-content - npm to render the html coming from ghost in the gatsby template react class.

1 Like
3

This seems like the best approach @Michael_Silva. You would’ve had the same issues if you had used markdown in Gatsby as well. There’s a pretty good explanation of why this can’t be done on that scripts readme:

When you use dangerouslySetInnerHtml on a component, internally react is using the innerHtml property of the node to set the content, which for safety purposes doesn’t execute any javascript.

1 Like