diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/cli.js b/packages/gatsby-cli/src/reporter/loggers/ink/cli.js
index 39463cc8111d4..e05e840c0af97 100644
--- a/packages/gatsby-cli/src/reporter/loggers/ink/cli.js
+++ b/packages/gatsby-cli/src/reporter/loggers/ink/cli.js
@@ -7,7 +7,7 @@ import Spinner from "../ink/components/spinner"
 import { ProgressBar } from "../ink/components/progress-bar"
 
 import { Message } from "../ink/components/messages"
-import Error from "./components/error"
+import { Error } from "./components/error"
 import Develop from "../ink/components/develop"
 
 const showProgress = isTTY()
diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/error.js b/packages/gatsby-cli/src/reporter/loggers/ink/components/error.js
deleted file mode 100644
index 7be638a89f256..0000000000000
--- a/packages/gatsby-cli/src/reporter/loggers/ink/components/error.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react"
-import path from "path"
-import { Color, Box } from "ink"
-import { get } from "lodash"
-
-const File = ({ filePath, location }) => {
-  const lineNumber = get(location, `start.line`)
-
-  let locString = ``
-  if (typeof lineNumber !== `undefined`) {
-    locString += `:${lineNumber}`
-    const columnNumber = get(location, `start.column`)
-    if (typeof columnNumber !== `undefined`) {
-      locString += `:${columnNumber}`
-    }
-  }
-
-  return (
-    <Color blue>
-      {path.relative(process.cwd(), filePath)}
-      {locString}
-    </Color>
-  )
-}
-
-const DocsLink = ({ docsUrl }) => {
-  // TODO: when there's no specific docsUrl, add helpful message describing how
-  // to submit an issue
-  if (docsUrl === `https://gatsby.dev/issue-how-to`) return null
-  return (
-    <Box marginTop={1}>
-      See our docs page for more info on this error: {docsUrl}
-    </Box>
-  )
-}
-
-const Error = React.memo(({ details }) => (
-  // const stackLength = get(details, `stack.length`, 0
-
-  <Box marginY={1} flexDirection="column">
-    <Box flexDirection="column">
-      <Box flexDirection="column">
-        <Box>
-          <Box marginRight={1}>
-            <Color black bgRed>
-              {` ${details.level} `}
-              {details.code ? `#${details.code} ` : ``}
-            </Color>
-            <Color red>{details.type ? ` ` + details.type : ``}</Color>
-          </Box>
-        </Box>
-        <Box marginTop={1}>{details.text}</Box>
-        {details.filePath && (
-          <Box marginTop={1}>
-            File:{` `}
-            <File filePath={details.filePath} location={details.location} />
-          </Box>
-        )}
-      </Box>
-      <DocsLink docsUrl={details.docsUrl} />
-    </Box>
-    {/* TODO: use this to replace errorFormatter.render in reporter.error func
-      {stackLength > 0 && (
-        <Box>
-          <Color>
-            <Box flexDirection="column">
-              <Box>Error stack:</Box>
-              {details.stack.map((item, id) => (
-                <Box key={id}>
-                  {item.fileName && `${item.fileName} line ${item.lineNumber}`}
-                </Box>
-              ))}
-            </Box>
-          </Color>
-        </Box>
-      )} */}
-  </Box>
-))
-
-export default Error
diff --git a/packages/gatsby-cli/src/reporter/loggers/ink/components/error.tsx b/packages/gatsby-cli/src/reporter/loggers/ink/components/error.tsx
new file mode 100644
index 0000000000000..a5bfe608be471
--- /dev/null
+++ b/packages/gatsby-cli/src/reporter/loggers/ink/components/error.tsx
@@ -0,0 +1,99 @@
+import React, { FunctionComponent } from "react"
+import path from "path"
+import { Color, Box } from "ink"
+import { get } from "lodash"
+
+interface IFileProps {
+  filePath: string
+  location: string
+}
+const File: FunctionComponent<IFileProps> = ({ filePath, location }) => {
+  const lineNumber = get(location, `start.line`)
+
+  let locString = ``
+  if (typeof lineNumber !== `undefined`) {
+    locString += `:${lineNumber}`
+    const columnNumber = get(location, `start.column`)
+    if (typeof columnNumber !== `undefined`) {
+      locString += `:${columnNumber}`
+    }
+  }
+
+  return (
+    <Color blue>
+      {path.relative(process.cwd(), filePath)}
+      {locString}
+    </Color>
+  )
+}
+
+interface IDocsLinkProps {
+  docsUrl: string
+}
+const DocsLink: FunctionComponent<IDocsLinkProps> = ({ docsUrl }) => {
+  // TODO: when there's no specific docsUrl, add helpful message describing how
+  // to submit an issue
+  if (docsUrl === `https://gatsby.dev/issue-how-to`) return null
+  return (
+    <Box marginTop={1}>
+      See our docs page for more info on this error: {docsUrl}
+    </Box>
+  )
+}
+
+interface IErrorProps {
+  details: {
+    level: string
+    code?: string
+    type?: string
+    text: string
+    filePath?: string
+    location: string
+    docsUrl: string
+  }
+}
+
+export const Error: FunctionComponent<IErrorProps> = React.memo(
+  ({ details }) => (
+    // const stackLength = get(details, `stack.length`, 0
+
+    <Box marginY={1} flexDirection="column">
+      <Box flexDirection="column">
+        <Box flexDirection="column">
+          <Box>
+            <Box marginRight={1}>
+              <Color black bgRed>
+                {` ${details.level} `}
+                {details.code ? `#${details.code} ` : ``}
+              </Color>
+              <Color red>{details.type ? ` ` + details.type : ``}</Color>
+            </Box>
+          </Box>
+          <Box marginTop={1}>{details.text}</Box>
+          {details.filePath && (
+            <Box marginTop={1}>
+              File:{` `}
+              <File filePath={details.filePath} location={details.location} />
+            </Box>
+          )}
+        </Box>
+        <DocsLink docsUrl={details.docsUrl} />
+      </Box>
+      {/* TODO: use this to replace errorFormatter.render in reporter.error func
+      {stackLength > 0 && (
+        <Box>
+          <Color>
+            <Box flexDirection="column">
+              <Box>Error stack:</Box>
+              {details.stack.map((item, id) => (
+                <Box key={id}>
+                  {item.fileName && `${item.fileName} line ${item.lineNumber}`}
+                </Box>
+              ))}
+            </Box>
+          </Color>
+        </Box>
+      )} */}
+    </Box>
+  )
+)