Gatsby-js client side javascript inline in blog post

Question

I am trying to setup a Blog using Gatsby-JS. I have some posts in markdown that contain inline javascript.

As an example:

<script>window.alert("hello");</script>

I test the site using the command "Gatsby serve"

When I browse to my post via the index of the blog. The script is not executed. In the web console there are no errors.

When on the post page itself. If I do F5 or ctrl-f5 then the "hello" alert is displayed.

After uploading the site to github pages this behavior changes. I cannot get the script to execute by F5 or by navigating via the index. Only when I press ctrl+F5 the script is executed.

live test-blog can be found here (it show multiple alerts and tries to load plotly). https://dwjbosman.github.io/lstm-neural-network-for-sequence-learning/

Answer 1

The previous answer pointed me in the right direction.

I gave all the inline scripts an attribute data-my-script. Next I added the following to layouts/index.jsx (not html.jsx as this is rendered only server side).

componentDidMount() {
    let scripts = window.jQuery.find('[data-my-script]')
    console.log(scripts);
        scripts.forEach(function forEachScript(element) {
            const script = window.jQuery(element).text();
            window.eval(script);
        });

  }

  render() {
    const { children } = this.props;
    return (
      <Navigation config={config} LocalTitle={this.getLocalTitle()}>
        <div ref={contentElement => (this.contentElement = contentElement)}>
          <Helmet>
            <meta name="description" content={config.siteDescription} />
            // for plotly inside notebooks
            //  <script src="https://cdn.plot.ly/plotly-latest.min.js" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"/>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"/>
          </Helmet>
          {children()}
        </div>
      </Navigation>
    );
  }
}

Answer 2

Dinne's solution worked for me. Nice one! :)

I did need to avoid the use of JQuery though so I have posted here a version that doesn't rely on it:

componentDidMount() {

  // Allow in-line JS scripts to be run
  let scripts = document.querySelectorAll('[data-inline-script="data-inline-script"]');
  scripts.forEach(function forEachScript(element) {
    const script = element.innerHTML;
    window.eval(script);
});

This will work with the following HTML:

<script data-inline-script="data-inline-script">
    console.log("this works");
</script>

I am using this on a very basic static site. I'm not sure how much I like using eval() to be honest but it should cause no harm in my use-case.

Update Although the above does work, I also need to include scripts using <script src="..."> which doesn't work :( This feels quite hacky too.

Answer 3

Checkout this question React: Script tag not working when inserted using dangerouslySetInnerHTML

Script in HTML that is inserted by React's dangerouslySetInnerHTML won't get executed. The linked question has a work around that perhaps you can use.