Gatsby MDXProvider Error: Element type is invalid: expected a string (for built-in components) or a class/function … but got: object

Discord: https://gatsby.dev/discord
Spectrum: https://spectrum.chat/gatsby-js
Twitter: https://twitter.com/gatsbyjs

Summary

I'm trying to use MDXRenderer to render the data.mdx.body values from the data values returned by a page query (by slug). The query appears to be working. The data.mdx.body value being passed to Template, when printed by applying JSON.stringify reveals JS code seemingly compiled from my mdx file along with other stuff. I assume that this code is a valid mdx body. Yet I get an error: "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object." I can provide any other info that might be needed.

Relevant information

For starters here's my template file.

import { graphql } from "gatsby"
import Layout from "../components/Layout"
import MDXRenderer from "gatsby-plugin-mdx"
import MDXProvider from "gatsby-plugin-mdx"
import Lean from "../components/lean"

const shortcodes = {
  Lean,
}

/*
MDXRenderer is a React component that takes compiled MDX content and renders it. You will need to use this if your MDX content is coming from a GraphQL page query or StaticQuery. MDXRenderer takes any prop and passes it on to your MDX content, just like a normal React component.
*/
const Template = ({ data }) => {
  return (
    <Layout>
      <MDXProvider components={shortcodes}>
        <MDXRenderer>{data.mdx.body}</MDXRenderer>
      </MDXProvider>
    </Layout>
  )
}

//  <div>{JSON.stringify(data.mdx.body)}</div>

// https://www.gatsbyjs.org/docs/page-query/#how-to-add-query-variables-to-a-page-query
export const pageQuery = graphql`
  query DocBySlug($slug: String!) {
    mdx(fields: { slug: { eq: $slug } }) {
      body
    }
  }
`

export default Template

Now if I substitute that commented-out stringify call, to return a stringified version of data.mdx.body instead of applying MDX Provider and Renderer, here's what's displayed:

"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {};\n\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\n\nvar Lean = makeShortcode(\"Lean\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, [\"components\"]);\n\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"h1\", null, \"My Header\"), mdx(\"p\", null, \"Hello, Real World!\"), mdx(Lean, {\n path: \"prop/all/all_swans_white_typed.lean\",\n mdxType: \"Lean\"\n }));\n}\n;\nMDXContent.isMDXComponent = true;"

Here's a stack dump from the browser:

createFiberFromTypeAndProps
node_modules/react-dom/cjs/react-dom.development.js:26628
createFiberFromElement
node_modules/react-dom/cjs/react-dom.development.js:26651
reconcileSingleElement
node_modules/react-dom/cjs/react-dom.development.js:15525
reconcileChildFibers
node_modules/react-dom/cjs/react-dom.development.js:15585
reconcileChildren
node_modules/react-dom/cjs/react-dom.development.js:18088
updateHostComponent
node_modules/react-dom/cjs/react-dom.development.js:18610
beginWork$1
node_modules/react-dom/cjs/react-dom.development.js:20192
HTMLUnknownElement.callCallback
node_modules/react-dom/cjs/react-dom.development.js:337
invokeGuardedCallbackDev
node_modules/react-dom/cjs/react-dom.development.js:386
invokeGuardedCallback
node_modules/react-dom/cjs/react-dom.development.js:441
beginWork$$1
node_modules/react-dom/cjs/react-dom.development.js:25779
performUnitOfWork
node_modules/react-dom/cjs/react-dom.development.js:24694
workLoopSync
node_modules/react-dom/cjs/react-dom.development.js:24670
performSyncWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:24269
(anonymous function)
node_modules/react-dom/cjs/react-dom.development.js:12200
unstable_runWithPriority
node_modules/scheduler/cjs/scheduler.development.js:697
runWithPriority$2
node_modules/react-dom/cjs/react-dom.development.js:12150
flushSyncCallbackQueueImpl
node_modules/react-dom/cjs/react-dom.development.js:12195
flushSyncCallbackQueue
node_modules/react-dom/cjs/react-dom.development.js:12183
unbatchedUpdates
node_modules/react-dom/cjs/react-dom.development.js:24438
legacyRenderSubtreeIntoContainer
node_modules/react-dom/cjs/react-dom.development.js:27526
render
node_modules/react-dom/cjs/react-dom.development.js:27607

This is what I'm assuming (but am probably wrong about) is a correct mdx body that MDXRenderer should be rendering correctly. Suggestions welcome.

Environment (if relevant)

System: OS: macOS 10.15.1 CPU: (4) x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz Shell: 3.2.57 - /bin/bash Binaries: Node: 13.5.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.13.4 - /usr/local/bin/npm Languages: Python: 2.7.16 - /usr/local/bin/python Browsers: Chrome: 79.0.3945.88 Firefox: 71.0 Safari: 13.0.3 npmPackages: gatsby: ^2.18.6 => 2.18.17 gatsby-cli: ^2.8.22 => 2.8.22 gatsby-image: ^2.2.34 => 2.2.37 gatsby-plugin-antd: ^2.1.0 => 2.1.0 gatsby-plugin-catch-links: ^2.1.19 => 2.1.21 gatsby-plugin-emotion: ^4.1.16 => 4.1.18 gatsby-plugin-eslint: ^2.0.8 => 2.0.8 gatsby-plugin-feed-mdx: ^1.0.0 => 1.0.0 gatsby-plugin-manifest: ^2.2.34 => 2.2.34 gatsby-plugin-mdx: ^1.0.64 => 1.0.64 gatsby-plugin-nprogress: ^2.1.15 => 2.1.17 gatsby-plugin-offline: ^3.0.30 => 3.0.30 gatsby-plugin-react-helmet: ^3.1.16 => 3.1.18 gatsby-plugin-react-next: ^1.0.11 => 1.0.11 gatsby-plugin-reason: ^2.0.1 => 2.0.1 gatsby-plugin-sharp: ^2.3.4 => 2.3.10 gatsby-plugin-sitemap: ^2.2.24 => 2.2.24 gatsby-plugin-styled-components: ^3.1.16 => 3.1.16 gatsby-plugin-theme-ui: ^0.2.53 => 0.2.53 gatsby-plugin-tslint: ^0.0.2 => 0.0.2 gatsby-plugin-typescript: ^2.1.23 => 2.1.23 gatsby-plugin-typography: ^2.3.18 => 2.3.20 gatsby-remark-copy-linked-files: ^2.1.33 => 2.1.33 gatsby-remark-external-links: ^0.0.4 => 0.0.4 gatsby-remark-images: ^3.1.34 => 3.1.39 gatsby-remark-katex: ^3.1.20 => 3.1.20 gatsby-remark-mathjax: ^1.0.0 => 1.0.0 gatsby-remark-prismjs: ^3.3.25 => 3.3.28 gatsby-remark-responsive-iframe: ^2.2.30 => 2.2.30 gatsby-remark-slug: ^0.1.0 => 0.1.0 gatsby-remark-smartypants: ^2.1.19 => 2.1.19 gatsby-source-filesystem: ^2.1.39 => 2.1.43 gatsby-source-graphql: ^2.1.29 => 2.1.29 gatsby-transformer-remark: ^2.6.45 => 2.6.45 gatsby-transformer-sharp: ^2.3.6 => 2.3.9 npmGlobalPackages: gatsby-cli: 2.8.22

File contents (if changed)

gatsby-config.js: N/A

/**
 * Configure your Gatsby site with this file.
 *
 * See: https://www.gatsbyjs.org/docs/gatsby-config/
 */

const path = require(`path`)

module.exports = {
  siteMetadata: {
    title: `Propositions and Proofs`,
    author: `Kevin Sullivan`,
    copyright: `Copyright © 2019 Kevin Sullivan. All rights reserved`,
    siteUrl: `https://provablesystems.com`,
    keywords: `predicate logic, propositional logic, constructive logic, discrete math, Lean Prover, UVa`,
    description: `A computational logic approach to discrete mathematics`,
  },
  plugins: [
    //`gatsby-plugin-eslint`, // uncomment when ready to fix violations of airbnb style guide
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-reason`,
    "gatsby-plugin-antd",
    /*     {
      resolve: 'gatsby-plugin-reason',
      options: {
        derivePathFromComponentName: true,
      },
 */
    `gatsby-plugin-theme-ui`,
    `gatsby-image`,
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    `gatsby-plugin-catch-links`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `lean`,
        path: `${__dirname}/src/code/lean`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    // {
    //   resolve: `gatsby-source-filesystem`,
    //   options: {
    //     name: `data`,
    //     path: `${__dirname}/src/data/`,
    //     ignore: [`**/\.*`], // ignore files starting with a dot
    //   },
    // },
    // {
    //   resolve: `gatsby-source-filesystem`,
    //   options: {
    //     path: `${__dirname}/src/images`,
    //     name: "images",
    //   },
    // },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/prose`,
        name: "prose",
      },
    },

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        extensions: [`.mdx`, `.md`],
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },

    {
      resolve: `gatsby-plugin-nprogress`,
      options: {
        showSpinner: true,
      },
    },
    // for prismjs and remark for code formatting
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: "Propositions and Proofs",
        short_name: "UVA DM",
        start_url: "/",
        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
        display: "standalone",
        // An optional attribute which provides support for CORS check.
        // If you do not provide a crossOrigin option, it will skip CORS for manifest.
        // Any invalid keyword or empty string defaults to `anonymous`
        crossOrigin: `use-credentials`,
      },
    },
    `gatsby-plugin-offline`, // MUST COME AFTER MANIFEST PLUGIN; SEE DOCS TO REMOVE SAFELY
    `gatsby-plugin-typescript`,
    "gatsby-plugin-feed-mdx",
  ],
}

package.json: N/A

{
  "name": "gatsby-template",
  "private": true,
  "description": "A Gatsby template for future development",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "dev:reason": "bsb -clean-world -make-world -w",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "lint:js": "eslint \"**/*.{js,jsx}\"",
    "lint": "tslint --project .",
    "precommit": "lint-staged",
    "test-write": "jest --watch",
    "test": "run-p test:* -cn",
    "test:lint": "npm run lint",
    "test:functional": "jest",
    "cy:open": "cypress open",
    "test:e2e": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test develop http://localhost:8000 cy:open",
    "cy:run": "cypress run",
    "test:e2e:ci": "start-server-and-test develop http://localhost:8000 cy:run",
    "type-check": "tsc --noEmit"
  },
  "dependencies": {
    "@babel/core": "^7.0.0-0",
    "@blueprintjs/core": "^3.22.3",
    "@blueprintjs/tslint-config": "^1.9.0",
    "@emotion/core": "^10.0.27",
    "@emotion/styled": "^10.0.23",
    "@mdx-js/mdx": "^1.5.3",
    "@mdx-js/react": "^1.5.3",
    "@reach/router": "^1.2.1",
    "@testing-library/cypress": "^5.0.2",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "antd": "^3.26.5",
    "auth0-js": "^9.12.1",
    "axe-core": "^3.4.1",
    "axios": "^0.19.0",
    "babel-jest": "^24.9.0",
    "babel-plugin-emotion": "^10.0.27",
    "babel-plugin-import": "^1.13.0",
    "babel-plugin-prismjs": "^1.1.1",
    "babel-plugin-styled-components": "^1.10.6",
    "babel-preset-gatsby": "^0.2.26",
    "bootstrap": "^4.4.1",
    "cypress": "^3.8.1",
    "cypress-axe": "^0.5.3",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-config-prettier": "^6.9.0",
    "eslint-loader": "^3.0.2",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jest": "^23.2.0",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-prettier": "^3.1.2",
    "fs": "^0.0.1-security",
    "fs-extra": "^8.1.0",
    "gatsby": "^2.18.6",
    "gatsby-cli": "^2.8.22",
    "gatsby-image": "^2.2.34",
    "gatsby-plugin-antd": "^2.1.0",
    "gatsby-plugin-catch-links": "^2.1.19",
    "gatsby-plugin-emotion": "^4.1.16",
    "gatsby-plugin-feed-mdx": "^1.0.0",
    "gatsby-plugin-manifest": "^2.2.34",
    "gatsby-plugin-mdx": "^1.0.64",
    "gatsby-plugin-nprogress": "^2.1.15",
    "gatsby-plugin-offline": "^3.0.30",
    "gatsby-plugin-react-helmet": "^3.1.16",
    "gatsby-plugin-react-next": "^1.0.11",
    "gatsby-plugin-reason": "^2.0.1",
    "gatsby-plugin-sharp": "^2.3.4",
    "gatsby-plugin-sitemap": "^2.2.24",
    "gatsby-plugin-styled-components": "^3.1.16",
    "gatsby-plugin-theme-ui": "^0.2.53",
    "gatsby-plugin-tslint": "^0.0.2",
    "gatsby-plugin-typescript": "^2.1.23",
    "gatsby-plugin-typography": "^2.3.18",
    "gatsby-remark-copy-linked-files": "^2.1.33",
    "gatsby-remark-external-links": "^0.0.4",
    "gatsby-remark-images": "^3.1.34",
    "gatsby-remark-katex": "^3.1.20",
    "gatsby-remark-mathjax": "^1.0.0",
    "gatsby-remark-prismjs": "^3.3.25",
    "gatsby-remark-responsive-iframe": "^2.2.30",
    "gatsby-remark-slug": "^0.1.0",
    "gatsby-remark-smartypants": "^2.1.19",
    "gatsby-source-filesystem": "^2.1.39",
    "gatsby-source-graphql": "^2.1.29",
    "gatsby-transformer-remark": "^2.6.45",
    "gatsby-transformer-sharp": "^2.3.6",
    "graphql": "^14.2.0",
    "grommet": "^2.9.0",
    "grommet-controls": "^2.0.2",
    "grommet-icons": "^4.4.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^24.9.0",
    "jest-config": "^24.9.0",
    "jest-emotion": "^10.0.27",
    "jest-puppeteer": "^4.4.0",
    "katex": "^0.10.0",
    "prismjs": "^1.17.1",
    "puppeteer": "^2.0.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-hook-form": "^3.28.11",
    "react-test-renderer": "^16.12.0",
    "react-typography": "^0.16.19",
    "reactstrap": "^8.2.0",
    "remark-parse": "^6.0.0",
    "start-server-and-test": "^1.10.6",
    "styled-components": "^4.4.1",
    "theme-ui": "^0.2.52",
    "typography": "^0.16.19",
    "typography-theme-fairy-gates": "^0.16.19",
    "typography-theme-funston": "^0.16.19"
  },
  "devDependencies": {
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@typescript-eslint/eslint-plugin": "^2.10.0",
    "@typescript-eslint/parser": "^2.10.0",
    "eslint": "^6.8.0",
    "eslint-plugin-react": "^7.17.0",
    "gatsby-plugin-eslint": "^2.0.8",
    "prettier": "^1.19.1",
    "tslint": "^5.20.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-loader": "^3.5.4",
    "tslint-plugin-prettier": "^2.1.0",
    "tslint-react": "^4.1.0",
    "typescript": "^3.7.4"
  },
  "repository": {
    "type": "git",
    "url": "https://logicpipeline.com/sullivan/gatsby-template"
  },
  "bugs": {
    "url": "https://logicpipeline.com/sullivan/gatsby-template/issues"
  },
  "jest": {
    "setupFilesAfterEnv": [
      "<rootDir>/setup-test-env.js"
    ]
  }
}

gatsby-node.js: N/A

const path = require("path")
const fs = require("fs-extra")

// We implement the Gatsby API “onCreatePage”. This
// code is called after every page is created, and
// serves to set each such page's matchPath attribute
// to "/account/*" before finalizing its creation.
// This metadata will be used later to protect any
// such page from unauthenticated users.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for
  // matching pages only on the client.
  if (page.path.match(/^\/account/)) {
    page.matchPath = "/account/*"

    if (page.path.match(/^\/dynabook/)) {
      page.matchPath = "/dynabook/*"

      // Update the page.
      createPage(page)
    }
  }
}

// https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions

  /*
  Process Blog Pages
  */
  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
  const blogResult = await graphql(`
    {
      allMdx(
        filter: { fileAbsolutePath: { regex: "/blog/" } }
        sort: { order: DESC, fields: [frontmatter___date] }
        limit: 1000
      ) {
        edges {
          node {
            frontmatter {
              path
            }
          }
        }
      }
    }
  `)
  if (blogResult.errors) {
    reporter.panicOnBuild(`Error while running Blog GraphQL query.`)
    return
  }
  blogResult.data.allMdx.edges.forEach(({ node }) => {
    console.log("Creating Blog Page for node = ", JSON.stringify(node))
    createPage({
      path: node.frontmatter.path,
      component: blogPostTemplate,
      context: {}, // additional data can be passed via context
    })
  })

  /*
  Process dynabook pages
  */
  const dynabookElementTemplate = path.resolve(
    `src/templates/dynabook-element.js`
  )
  const bookResult = await graphql(`
    {
      allMdx(filter: { fileAbsolutePath: { regex: "/dynabook/" } }) {
        edges {
          node {
            frontmatter {
              path
            }
            fields {
              slug
            }
          }
        }
      }
    }
  `)
  if (bookResult.errors) {
    reporter.panicOnBuild(`Error while running Dynabook GraphQL query.`)
    return
  }
  bookResult.data.allMdx.edges.forEach(({ node }) => {
    console.log("CreatePages: creating page for NODE =", JSON.stringify(node))
    // See https://www.gatsbyjs.org/tutorial/part-seven/
    createPage({
      path: node.fields.slug,
      component: dynabookElementTemplate,
      context: {
        // Data passed to context is available
        // in page queries as GraphQL variables.
        slug: node.fields.slug,
      },
    })
  })
}

/*
This code prevents Auth0 functionality from being
invoked at build time.
*/
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    /*
     * For AUTH0. From the documentation:

     During the build step, `auth0-js` will break because it relies on
     browser-specific APIs. Fortunately, we don’t need it during the build. Using Webpack’s null loader, we’re able to basically ignore 
      `auth0-js`during the build. (See `src/utils/auth.js` to see how 
      we prevent this from breaking the app.)
     */
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /auth0-js/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

// Take additional actions whenever a node is created
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions

  // Gatby doesn't load file contents by default.
  // Add file contents as fields.contents to any .lean File node
  if (node.internal.type === `File` && node.ext === ".lean") {
    fs.readFile(node.absolutePath, undefined, (_err, buf) => {
      createNodeField({ node, name: `contents`, value: buf.toString() })
    })
  }

  /* Because we might source MDX files from outside
  the pages directory, we need to set a slug field
  to tell the page creator what URL to use for this
  node. 
  */
  const { createFilePath } = require(`gatsby-source-filesystem`)
  if (node.internal.type === "Mdx") {
    const relativePath = createFilePath({ node, getNode })
    // Individual MDX node
    // Name of the field you are adding
    // Generated value based on filepath with "prose" prefix
    createNodeField({
      node,
      name: "slug",
      value: `/prose${relativePath}`,
    })
    /*
    console.log(`\n onCreateNode relative path`, fileNode.relativePath)
    console.log(
      "onCreateNode synthesized path === ",
      JSON.stringify(relativePath)
    )
    console.log("onCreateNode updated node === ", JSON.stringify(node))
    */
  }
}

gatsby-browser.js: N/A

import React from "react"
import AppContext from "./src/components/app-context"
import { silentAuth } from "./src/utils/auth"

// For prismjs
require("prismjs/themes/prism-okaidia.css")
//require("prismjs/themes/prism-solarizedlight.css")

// For Auth0 integration
class SessionCheck extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
    }
    //    this.handleCheckSession = this.handleCheckSession.bind(this)
  }

  handleCheckSession = () => {
    this.setState({ loading: false })
  }

  componentDidMount() {
    silentAuth(this.handleCheckSession)
  }

  render() {
    return (
      this.state.loading === false && (
        <React.Fragment>{this.props.children}</React.Fragment>
      )
    )
  }
}

// Wrap with Context!
export const wrapRootElement = ({ element }) => {
  return (
    <SessionCheck>
      <AppContext>{element}</AppContext>
    </SessionCheck>
  )
}

gatsby-ssr.js: N/A

//import { silentAuth } from "./src/utils/auth"
import React from "react"
import AppContext from "./src/components/app-context"

export const wrapRootElement = ({ element }) => (
  <AppContext>{element}</AppContext>
)

gatsbyjs / gatsby