Implementing Gatsby-js for client-side JavaScript directly within a blog post is a powerful

Question

Implementing Gatsby-js for client-side JavaScript directly within a blog post is a powerful

I've been working on setting up a blog using Gatsby-JS and have run into a bit of an issue. My posts, written in markdown, include inline javascript like this:

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

When I test the site with "Gatsby serve", the script doesn't execute when I visit my post from the blog index. Strangely, there are no errors in the web console.

However, if I navigate directly to the post page or refresh the page (F5 or ctrl+f5), the alert pops up as expected.

After deploying the site to GitHub Pages, I noticed a change in behavior. Even refreshing or navigating from the index doesn't trigger the script. Only after pressing ctrl+F5 does it work.

If you'd like to see a live test example, you can check out my blog here. It showcases multiple alerts and attempts to load Plotly.

javascript webpack gatsby

Answer 1

Answer №1

Successfully implemented Dinne's solution. Great job! :)

I had to find an alternative to JQuery, so here is a version that doesn't rely on it:

componentDidMount() {

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

This code snippet works with the following HTML:

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

I am using this approach on a simple static website. Although I'm not a fan of using eval(), it serves its purpose without harm in my case.

Update While the above solution functions, I encountered issues when trying to include external scripts using <script src="...">, which didn't work :( This workaround feels somewhat makeshift as well.

Answer 2

Successfully implemented Dinne's solution. Great job! :)

I had to find an alternative to JQuery, so here is a version that doesn't rely on it:

componentDidMount() {

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

This code snippet works with the following HTML:

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

I am using this approach on a simple static website. Although I'm not a fan of using eval(), it serves its purpose without harm in my case.

Update While the above solution functions, I encountered issues when trying to include external scripts using <script src="...">, which didn't work :( This workaround feels somewhat makeshift as well.

Answer 3

Answer №2

Take a look at this question React: Script tag not working when inserted using dangerouslySetInnerHTML

The issue arises when trying to execute scripts in HTML that is inserted through React's dangerouslySetInnerHTML. A helpful workaround is provided in the linked question, which you may find useful.

Answer 4

Take a look at this question React: Script tag not working when inserted using dangerouslySetInnerHTML

The issue arises when trying to execute scripts in HTML that is inserted through React's dangerouslySetInnerHTML. A helpful workaround is provided in the linked question, which you may find useful.

Answer 5

Answer №3

The guidance provided by the previous response was instrumental in helping me find my way.

To solve the issue, I assigned the attribute data-my-script to all inline scripts and then made modifications to layouts/index.jsx (not html.jsx since it is only rendered on the 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 6

The guidance provided by the previous response was instrumental in helping me find my way.

To solve the issue, I assigned the attribute data-my-script to all inline scripts and then made modifications to layouts/index.jsx (not html.jsx since it is only rendered on the 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>
    );
  }
}

Implementing Gatsby-js for client-side JavaScript directly within a blog post is a powerful

Answer №1

Answer №2

Answer №3

Similar questions

Encountering issue with 'mongodb-connection-string-url'

What is the best way to use createElement in JavaScript to insert <p> and <span> elements within a <div>?

Is it possible to create two header columns for the same column within a Material UI table design?

Contentful integrated into a NuxtJs website

Script injection causing Vue bundle to fail executing

Modify the hyperlink address in the body of the webpage using jQuery

The function initiates without delay upon meeting the specified condition

Function in Typescript that can return multiple data types

retrieve HTML content by its ID stored in a variable

What is the best way to add a filter to a nested array?

WebStorm not recognizing NodeJS Core Modules in External Libraries

Steps for showcasing a automated slideshow

The problem of having an undefined state in Vuex arises

Iterating through elements to set the width of a container

Transition smoothly from the first texture to a solid color, and then seamlessly switch to the second texture using a GLSL Shader

Create a function that will repeatedly call itself at specified intervals, increment a variable, and update the class values of elements with an id matching the current value of the

Implement functionality in JS to track the number of clicks on an element

How to Retrieve Superclass Fields in Angular 5 Component

Insert an element at the start of a sorted array object

Modifications to contenteditable elements result in a change to their IDs