My Gatsby/Drupal site fails during build because of one content in Drupal. How do I fix it?

Question

I have a Gatsby site that connects to Drupal CMS via GraphQL to get the content from there. It has separate dynamic pages for each of the content items.

I works fine when I type gatsby develop in the terminal and run the site locally.

However, when I try to build it using the command gatsby build, the build process fails and apparently it is due to one of the content items that is extracted from the Drupal CMS.

I tried to use the link provided in the error message and I got this:

Objects are not valid as a React child (found: object with keys {processed}). If you meant to render a collection of children, use an array instead.

Below is the error message:

 ERROR 

Page data from page-data.json for the failed page "/staff/v-coleman": {
  "componentChunkName": "component---src-dynamic-doctor-profile-js",
  "path": "/staff/v-coleman",
  "result": {
    "data": {
      "nodeAccountant": {
        "id": "77",
        "name": "V. Coleman",
        "designation": "Chief Accountant",
        "expertise": "\"Payables \r\nIMRT\r\n4D gated RT\r\n3DCRT\r\nReceivables\r\Text: More and more text...",
        "availability": null,
        "experience": null,
        "Education": {
          "processed": "<ul>\n\t<li>College Name, Country: Year</li>\n\t<li>College at Country : Year</li>\n\t<li>Certification Name
 under Mentor Name at Country Name in Year</li>\n</ul>"
        },
        "training": null,
        "affiliations": {
          "processed": "<ul>\n\t<li>ABC - Uganda</li>\n\t<li>ZYX – Germany</li>\n\t<li>QWERTY - Italy</li>\n</ul>"
        },
        "books": {
          "processed": "<h4><strong>Basic Accounting</strong></h4>\n\n<ul>\n\t<li>Details...</li>\n\t<li>More text</li>\n</ul>\n\n<h4><strong>More text</st..."
        },
        "recognition": {
          "processed": "<ul>\n\t<li>Lots of text..."
        },
        "phd": null,
        "volunteer_work": null
      },
      "allNodeAccountant": {
        "nodes": [
          {
            "id": "0",
            "name": "Name 1",
            "designation": "Designation 1",
            "experience": null
          },
          {
            "id": "1",
            "name": "Name 2",
            "designation": "Designation 2",
            "experience": null
          },
          {
            "id": "2",
            "name": "Name 3",
            "designation": "Designation 3",
            "experience": null
          }
        ]
      }
    },
    "pageContext": {
      "doctorID": "77"
    }
  },
  "staticQueryHashes": []
}

failed Building static HTML for pages - 8.564s

 ERROR #95313 

Building static HTML failed for path "/staff/v-coleman"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  2 |
  3 | function _inheritsLoose(subClass, superClass) {
> 4 |   subClass.prototype = Object.create(superClass.prototype);
    | ^
  5 |   subClass.prototype.constructor = subClass;
  6 |   setPrototypeOf(subClass, superClass);
  7 | }


  WebpackError: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7Bprocessed%7D for the full messa
  ge or use the non-minified dev environment for full errors and additional helpful warnings.
  
  - inheritsLoose.js:4 
    [gatsby-starter-hello-world]/[@babel]/runtime/helpers/inheritsLoose.js:4:1
  
  - inheritsLoose.js:7 
    [gatsby-starter-hello-world]/[@babel]/runtime/helpers/inheritsLoose.js:7:1
  
  - static-entry.js:294 
    gatsby-starter-hello-world/.cache/static-entry.js:294:22
  
  - utils.js:51 
    [gatsby-starter-hello-world]/[@gatsbyjs]/reach-router/lib/utils.js:51:1

And below is the template for the dynamic pages:

import React, { Fragment } from 'react';
import { Link } from "gatsby";
import Layout from '../components/Layout';
import { graphql } from "gatsby";

const accountantProfile = ({ data }) => {
    const accountant = data.nodeAccountant;
    const accountants = data.allNodeAccountant.nodes;

    return (<Fragment>
        <Layout>
            <main>
                <section>
                    <h2>{accountant.designation}</h2>
                    <div>
                        <div>
                            <div>
                                <h3>{accountant.name}</h3>
                                <h4>{accountant.designation}</h4>
                            </div>
                            <div>
                                <h5>
                                    <img loading='lazy' src="/icons/expertise.svg" alt="" />
                                    Areas of Expertise</h5>
                                <p>{accountant.expertise}</p>
                            </div>
                        </div>
                        <div>
                            <picture class="hero_image text-center">
                                <source media="(min-width:1024px)"
                                    srcset="/dr_profile.png" />
                                <source media="(min-width:300px)"
                                    srcset="/dr_profile.png" />
                                <img loading='lazy' src="/dr_profile.png" alt="" />
                            </picture>
                        </div>
                    </div>
                </section>
                <section>
                    <div>
                        <div>
                            <div>
                                <div id="accordion">
                                    <div class="card">
                                        <div id="headingTwo">
                                            <h5 class="mb-0">
                                                <a href="#aboutAccountant">
                                                    About the Accountant
                                                </a>
                                            </h5>
                                        </div>
                                        <div id="aboutAccountant">
                                            <div>{'' + accountant.name + ' is a ' + accountant.designation + '.'}
                                            </div>
                                        </div>
                                    </div>
                                    {accountant.books &&
                                        <div>
                                            <div id="heading10">
                                                <h5>
                                                    <a href="#Publications">
                                                        Publications
                                                    </a>
                                                </h5>
                                            </div>
                                            <div id="Publications">
                                                <div dangerouslySetInnerHTML={{ __html: accountant.books.processed }} />
                                            </div>
                                        </div>
                                    }
                                </div>
                            </div>
                            {/* consulants */}
                            <div>
                                <div>
                                    <h2>Accountants</h2>
                                    {accountants.map((acc, i = 0) => {
                                        if (i < 4) {
                                            return (<div>
                                                <figure>
                                                    <img loading='lazy' src="/accountant_img.png" alt="" />
                                                </figure>
                                                <div>
                                                    <h3>{acc.name}
                                                        <br />
                                                        <span>{acc.designation}</span>
                                                    </h3>
                                                </div>
                                            </div>);
                                        }
                                        i++;
                                    })
                                    }
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
        </Layout>

    </Fragment>);
};

export default accountantProfile;

export const query = graphql`
  query($accountantID: String!) {
    nodeAccountant(id: {eq: $accountantID}) {
        id
        name
        designation
        expertise
        availability
        experience
        Education {
            processed
        }
        training {
            processed
        }
        affiliations {
            processed
        }
        books {
            processed
        }
        recognition {
            processed
        }
        phd {
            processed
        }
        volunteer_work {
            processed
        }
        books {
            processed
        }
    }
    allNodeAccountant {
        nodes {
            id
            name
            designation
            experience
        }
    }
  }
`;

How do I fix this?

Answer 1

I think your issue raises because you have two repeated keys in your GraphQL query. You have two times the following:

    books {
        processed
    }

Getting rid of one of them should fix your issue.

Obviously the offending line is:

<div id="Publications">
   <div dangerouslySetInnerHTML={{ __html: accountant.books.processed }} /> 
</div>

Try using a HTML parser (html-react-parser):

import parse from 'html-react-parser';

{parse(accountant.books.processed)}