fix(gatsby): Improve error message when EnsureResources fails to ensu…

…re a resource (#21429)

* fix(gatsby): Ensure that EnsureResources ensures resources

* test

* Throw error if the pageResource fails to load

* fix lint

* add jsx flag to allow test to pass

* Update packages/gatsby/cache-dir/ensure-resources.js

Co-Authored-By: Ward Peeters <ward@coding-tech.com>

Co-authored-by: Ward Peeters <ward@coding-tech.com>
Co-authored-by: GatsbyJS Bot <mathews.kyle+gatsbybot@gmail.com>

packages/gatsby/cache-dir/__tests__/ensure-resources.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import EnsureResources from "../ensure-resources"
+import { render, getNodeText, cleanup } from "@testing-library/react"
+
+jest.mock(`../loader`, () => {
+  return {
+    loadPageSync(path: string): { loadPageSync: boolean; path: string } {
+      return { loadPageSync: true, path }
+    },
+    loadPage(path: string): Promise<{ loadPage: boolean; path: string }> {
+      return Promise.resolve({ loadPage: true, path })
+    },
+  }
+})
+
+afterAll(cleanup)
+
+describe(`EnsureResources`, () => {
+  it(`loads pages synchronously`, () => {
+    const location = {
+      pathname: `/`,
+    }
+    const { container } = render(
+      <EnsureResources location={location}>
+        {(data: any): string => JSON.stringify(data.pageResources)}
+      </EnsureResources>
+    )
+
+    expect(getNodeText(container)).toMatchInlineSnapshot(
+      `"{\\"loadPageSync\\":true,\\"path\\":\\"/\\"}"`
+    )
+  })
+})

packages/gatsby/cache-dir/ensure-resources.js

@@ -74,6 +74,14 @@ class EnsureResources extends React.Component {
   }
 
   render() {
+    if (process.env.NODE_ENV !== `production` && !this.state.pageResources) {
+      throw new Error(
+        `EnsureResources was not able to find resources for path: "${this.props.location.pathname}"
+This typically means that an issue occurred building components for that path.
+Run \`gatsby clean\` to remove any cached elements.`
+      )
+    }
+
     return this.props.children(this.state)
   }
 }

tsconfig.json

@@ -12,7 +12,8 @@
     "strictPropertyInitialization": true,
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "jsx": "preserve"
   },
   "exclude": ["peril/*", "examples/*"]
 }