Higher Order Components + Gatsby Sitting In a Tree

index.js

import React from "react"
import { Link, graphql } from "gatsby"

import Layout from "../components/layout"
import Image from "../components/image"
import SEO from "../components/seo"

const withAuthentication = Page => {
  return class extends React.Component {
    state = {
      auth: {
        authenticated: true
      }
    }
  
    render() {
      return (
        <Page {...this.state} {...this.props} />
       )
    }
  }
}

const IndexPage = ({ data }) => (
  <Layout>
    <SEO title="Home" />
    <h1>Hi {data.site.siteMetadata.title}</h1>
    <p>Welcome to your new Gatsby site.</p>
    <p>Now go build something great.</p>
    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
      <Image />
    </div>
    <Link to="/page-2/">Go to page 2</Link>
  </Layout>
)

export const query = graphql`
  {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default withAuthentication(IndexPage)

Hi Brother!
I am trying to implement HOC in gatsby too... to do this I have created a JS file like with-----.js. Then, I have coded as you did in withAuthentication. From my other component, I have exported as default with-----.js passing that particular component as a parameter...This was well in my NEXT JS project when I wanted to make a Private route...and I was successful... but right now in gatsby, same procedure I have followed and failed with the error of
_```
Cannot read properties of undefined (reading 'prototype')

./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js:3
Open in Editor
1 | import setPrototypeOf from "./setPrototypeOf.js";
2 | export default function _inheritsLoose(subClass, superClass) {

3 | subClass.prototype = Object.create(superClass.prototype);
4 | subClass.prototype.constructor = subClass;
5 | setPrototypeOf(subClass, superClass);

I cannot understand what's wrong which throws an error of undefined...